https://github.com/researchgate/babel-plugin-transform-scss-import-to-string

Babel plugin for inlining Sass imports into transpiled strings
https://github.com/researchgate/babel-plugin-transform-scss-import-to-string

babel babel-plugin sass scss transform

Last synced: about 2 months ago
JSON representation

Babel plugin for inlining Sass imports into transpiled strings

• Host: GitHub
• URL: https://github.com/researchgate/babel-plugin-transform-scss-import-to-string
• Owner: researchgate
• License: mit
• Created: 2017-11-21T11:08:43.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T20:10:42.000Z (over 1 year ago)
• Last Synced: 2024-11-01T04:17:49.120Z (about 2 months ago)
• Topics: babel, babel-plugin, sass, scss, transform
• Language: JavaScript
• Homepage:
• Size: 2.34 MB
• Stars: 10
• Watchers: 10
• Forks: 1
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-transform-scss-import-to-string









Babel transform plugin for replacing \*.scss imports with static variable

declaration as css string.

## Example

```js

import sideEffectStyles from './styles.sass';

// vvv

const sideEffectStyles = '.foo { color: red; }';

```

## Quick start

Install the plugin first:

```sh

# yarn

yarn add --dev @researchgate/babel-plugin-transform-scss-import-to-string

# npm

npm install --save-dev @researchgate/babel-plugin-transform-scss-import-to-string

```

Add it to your babel configuration:

```json

{

  "plugins": ["@researchgate/babel-plugin-transform-scss-import-to-string"]

}

```

Or with custom [`node-sass` options](https://github.com/sass/node-sass#options):

```json

{

  "plugins": [

    [

      "@researchgate/babel-plugin-transform-scss-import-to-string",

      { "precision": 3 }

    ]

  ]

}

```

Import \*.scss files:

```scss

// foo.scss

$bar: 42px;

.foo {

  font-size: $bar;

}

```

```js

// foo.js

import foo from './foo.scss';

console.log(foo); // -> .foo { font-size: 42px; }

```

## Requirements

- `node-sass`, which you should install explicitly

- `@babel/core`, which you should already have with babel configured

## Caveats

- This module shouldn't be used with webpack and sass-loader since babel

  transform would take first place in build process.

- Every import transpiled with node-sass as an independent file, so you have to

  explicitly import dependencies if you used to have common context before.