Babel plugin for inlining Sass imports into transpiled strings
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
.gitignore
.travis.yml
license
package.json
readme.md
yarn.lock

readme.md

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

Build Status Codecov Greenkeeper badge NPM version

Babel transform plugin for replacing *.scss imports with static variable declaration as css string.

Example

import sideEffectStyles from './styles.sass';
// vvv
const sideEffectStyles = '.foo { color: red; }';

Quick start

Install the plugin first:

# 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:

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

Or with custom node-sass options:

{
  "plugins": [
    [
      "@researchgate/babel-plugin-transform-scss-import-to-string",
      { "precision": 3 }
    ]
  ]
}

Import *.scss files:

// foo.scss
$bar: 42px;
.foo {
  font-size: $bar;
}
// 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.