https://github.com/giuseppeg/styled-jsx-plugin-sass

Plugin to add Sass support to styled-jsx. Warning this is a Proof Of Concept plugin.
https://github.com/giuseppeg/styled-jsx-plugin-sass

css-in-js sass scss styled-jsx styled-jsx-plugin

Last synced: 25 days ago
JSON representation

Plugin to add Sass support to styled-jsx. Warning this is a Proof Of Concept plugin.

• Host: GitHub
• URL: https://github.com/giuseppeg/styled-jsx-plugin-sass
• Owner: giuseppeg
• Created: 2017-10-06T13:21:07.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T09:58:03.000Z (over 1 year ago)
• Last Synced: 2024-05-29T20:39:21.867Z (about 1 month ago)
• Topics: css-in-js, sass, scss, styled-jsx, styled-jsx-plugin
• Language: JavaScript
• Homepage:
• Size: 45.9 KB
• Stars: 122
• Watchers: 5
• Forks: 23
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Lists

• awesome-stars - styled-jsx-plugin-sass - jsx. Warning this is a Proof Of Concept plugin. | giuseppeg | 122 | (JavaScript)

README

        
# styled-jsx-plugin-sass

[![Build Status](https://travis-ci.org/giuseppeg/styled-jsx-plugin-sass.svg?branch=master)](https://travis-ci.org/giuseppeg/styled-jsx-plugin-sass)

[![npm](https://img.shields.io/npm/v/styled-jsx-plugin-sass.svg)](https://www.npmjs.com/package/styled-jsx-plugin-sass)

Use [Sass](http://sass-lang.com/) with [styled-jsx](https://github.com/zeit/styled-jsx) 💥

⚠️ **This plugin is not actively being maintained. If you want me to work on it please [consider donating](https://github.com/sponsors/giuseppeg).**

## Usage

Install the package first.

```bash

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

```

Install the `node-sass` version you need (it is a peer dependency).

```bash

npm install --save-dev node-sass

```

Next, add `styled-jsx-plugin-sass` to the `styled-jsx`'s `plugins` in your babel configuration:

```json

{

  "plugins": [

    [

      "styled-jsx/babel",

      { "plugins": ["styled-jsx-plugin-sass"] }

    ]

  ]

}

```

## Node-sass options

Node-sass can be configured using `sassOptions`. This is useful for setting options such as `includePaths` or `precision`.

```json

{

  "plugins": [

    [

      "styled-jsx/babel",

      {

        "plugins": [

          ["styled-jsx-plugin-sass", {

              "sassOptions": {

                "includePaths": ["./styles"],

                "precision": 2

              }

            }

          ]

        ]

      }

    ]

  ]

}

```

#### Notes

`styled-jsx-plugin-sass` uses `styled-jsx`'s plugin system which is supported from version 2.

Read more on their repository for further info.

## License

MIT