@easy-webpack/config-sass
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    @easy-webpack/config-sass

    Sass is a CSS pre-processor. This configuration enable you to compile Sass file and include in your webpack bundle.

    sass-loader is used in this config.

    This use config-css to achieve loading of CSS module. It is highly recommended to read the documentation of config-css before using this module.

    Installation

    npm install --save-dev @easy-webpack/config-sass
    

    easy-webpack is also required.

    Usage

    // webpack.config.js
    const generateConfig = require('@easy-webpack/core').generateConfig;
     
    const baseConfig = { ... }; // project-specific config like the entry file
     
    module.exports = generateConfig(
      baseConfig,
     
      require('@easy-webpack/config-sass')
        ({/* Options object */ filename: 'styles.css', allChunks: true, sourceMap: false })
    );
     
    // This config will compile sass file imported and generate a CSS file named 'style.css' on output path 

    Options

    All options (except the below one) are identical to that of config-css. Please refer to their documentation.

    additionalLoaders

    Type: string[] Default: []

    This option need special notice as it may cause confusion.

    All loaders string in this config option array will be append before sass-loader.

    For example,

    const generateConfig = require('@easy-webpack/core').generateConfig;
     
    generateConfig(
      require('@easy-webpack/config-sass')
        ({ additionalLoaders: ['postcss-loader'], extractText: false })
    )
     
    // Final loader string will be 'style-loader!css-loader!postcss-loader!sass-loader'

    Tips

    Pass in options to sass compiler

    Please refer to options of node-sass for all available options.

    In Webpack 1, pass in options can be achieved by adding a sassLoader property on webpack config.

    In Webpack 2, a loader-options-plugin must be used to pass in options. Note that you may only use this plugin once with a given test, as it will override all the options once used and can cause problems.

    const path = require('path');
    const webpack = require('webpack');
    const generateConfig = require('@easy-webpack/core').generateConfig;
     
    // webpack 1
    generateConfig(
      require('@easy-webpack/config-sass')(),
      {
        sassLoader: {
          includePaths: [path.resolve('node_modules/material-design-lite/src')]
        }
      }
    );
     
    // webpack 2
    generateConfig(
      require('@easy-webpack/config-sass')(),
      {
        plugins: [new webpack.LoaderOptionsPlugin({
          test: /\.s[ac]ss$/i,
          options: {
            sassLoader: {
              includePaths: [path.resolve('node_modules/material-design-lite/src')]
            }
          }
        })]
      }
    )

    Install

    npm i @easy-webpack/config-sass

    DownloadsWeekly Downloads

    28

    Version

    5.0.0

    License

    MIT

    Last publish

    Collaborators

    • bazyli.brzoska