@noname-land/scss-loader

It uses sass-loader inside, and two “preloaders” for it.

The first preloader adds $b variable with a current BEM block name as a value. It tries to find it using recursive file system tree search from current file to /.

The second preloader adds @imports of all paths listed in pathsToImports option.

Everything else is just a regular sass-loader.

Works with SCSS only.

Installation

npm i --save @noname-land/scss-loader

Usage

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: [
          // ...
          {
            loader: '@noname-land/scss-loader',
            options: {
              implementation: require('sass'),
              
              sassOptions: {
                fiber: require('fibers'),
                sourceMap: true,
                includePaths: ['absolute/path/to/files'],
              },
              // ↑ optional things here; 
              // just to clarify that you can pass them through 
              // this loader to sass-loader
              
              pathsToImport: [
                'path/to/some/scss/file'
              ],
              // ↑ option for second “preloader” 
            },
          },
          // ...
        ],
      },
      // ...
    ],
  },
  // ...
};

Example

Let's say you have a file tree kind of this:

common
└── variables.scss
components
└── block
    └── __elem
        └── block__elem.scss

block__elem.scss:

#{$b}__elem {
  color: $mainColor;
}

variables.scss:

$mainColor: red;

And you also have the loader configured in this way:

// ...
{
  loader: '@noname-land/scss-loader',
  options: {
    // ...
    pathsToImport: [
      'path/to/common/variables.scss'
    ],
  },
},
// ...

On build stage your block__elem.scss will be changed step-by-step:

1. $b will be prepended:

   $b: 'block';   
   
   #{$b}__elem {
     color: $mainColor;
   }

2. Then @import to variables.scss will be prepended:

   @import 'path/to/common/variables.scss';   
   
   $b: 'block';   
   
   #{$b}__elem {
     color: $mainColor;
   }

3. Finally, sass-loader will compile your file using Sass renderer, and you will get this:

   .block__elem {
     color: red;
   }