@stylin/msa-loader

@stylin/msa-loader

The primary webpack loader for generation Mapping Style Annotations.

Installation

npm install --save-dev @stylin/msa-loader

You need to install style-loader or mini-css-extract-plugin:

npm install --save-dev style-loader
// or
npm install --save-dev mini-css-extract-plugin

⚠ Important

Don't install both, use one of them.

Optional loader and recommended

npm install --save-dev sass-loader

In webpack configuration file, place @stylin/msa-loader after style-loader or mini-css-extract-plugin in modules/rules.

webpack.config.js configuration with style-loader:

module.exports = {
  module: {
    rules: [{
      test: /\.scss$/i,
      use: [
        `@stylin/ts-loader`, // only if you use TypeScript
        `@stylin/msa-loader`,
        `style-loader`,
        {loader: `css-loader`, options: {modules: true}},
        `sass-loader`, // optional
      ],
    }],
  }
}

webpack.config.js configuration with MiniCssExtractPlugin:

const MiniCssExtractPlugin = require(`mini-css-extract-plugin`)

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  ...
  module: {
    rules: [{
      test: /\.scss$/i,
      use: [
        `@stylin/ts-loader`,  // only if you use TypeScript
        `@stylin/msa-loader`,
        {
          loader: MiniCssExtractPlugin.loader,
          options: {publicPath: `folder-where-css-files-will-be-stored`}
        },
        {loader: `css-loader`, options: {modules: true}},
        `sass-loader`, // optional
      ],
    }],
  }
}

⚠ Important

Set modules to true in options of css-loader:

{loader: 'css-loader', options: {modules: true}}