📜 About

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

Install the package and sass version you need (it is a peer dependency).

npm install --save-dev sass @styled-jsx/plugin-sass

⚙️ Usage

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 options

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"
                }
              }
            ]
          ]
        }
      }
    ]
  ]
}

💡 Contributing

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.

📄 License

MIT