Babel plugin for transforming SCSS imports to static variable declarations with transpiled CSS string

Downloads in past


9121.0.03 years ago5 years agoMinified + gzip package size for @researchgate/babel-plugin-transform-scss-import-to-string in KB


Build Status Codecov Greenkeeper badge NPM version
Babel transform plugin for replacing \*.scss imports with static variable declaration as css string.


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": [
      { "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; }


  • node-sass, which you should install explicitly
  • babel-core, which you should already have with babel configured


  • 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.