Plugin to add Sass support to styled-jsx.
⚠️ This project is not maintained anymore, you can still use the code as you wish and fork it to maintain it yourself.
Use Sass with styled-jsx 💥
This repository was originally forked from giuseppeg/styled-jsx-plugin-sass & it is not intended to take any credit but to improve the code from now on.
Install the package and sass version you need (it is a peer dependency).
npm install --save-dev sass @styled-jsx/plugin-sass
Add @styled-jsx/plugin-sass
to the styled-jsx
's plugins
in your babel configuration (e.g. .babelrc.json
):
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": ["@styled-jsx/plugin-sass"]
}
}
]
]
}
Sass can be configured using sassOptions
. This is useful for setting options such as data
or includePaths
, see all the available options in Sass README.
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
[
"@styled-jsx/plugin-sass",
{
"sassOptions": {
"includePaths": ["./styles"],
"data": "$test-color: #ff0000"
}
}
]
]
}
}
]
]
}
Anyone can help to improve the project, submit a Feature Request, a bug report or even correct a simple spelling mistake.
The steps to contribute can be found in the CONTRIBUTING.md file.