README
@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:
$b
will be prepended:$b: 'block'; #{$b}__elem { color: $mainColor; }
Then
@import
tovariables.scss
will be prepended:@import 'path/to/common/variables.scss'; $b: 'block'; #{$b}__elem { color: $mainColor; }
Finally, sass-loader will compile your file using Sass renderer, and you will get this:
.block__elem { color: red; }