Necessarily Precedes Mischief

    @noname-land/scss-loader

    1.0.2 • Public • Published

    @noname-land/scss-loader

    npm

    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;
      }

    Keywords

    none

    Install

    npm i @noname-land/scss-loader

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    none

    Unpacked Size

    4.72 kB

    Total Files

    4

    Last publish

    Collaborators

    • igoradamenko