postcss-sass-loader

PostCSS Loader

Loader for webpack to process SASS with PostCSS

Install

npm i -D postcss-sass-loader

Usage

Configuration

postcss.config.js

module.exports = {
  plugins: [
      require('autoprefixer')
  ]
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ca]ss$/,
        use: [ 'style-loader', 'css-loader', 'postcss-sass-loader' ]
      }
    ]
  }
}

webpack.config.js (recommended)

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { alias: { "@test": "/home/test"} } },
          'postcss-sass-loader'
        ]
      }
    ]
  }
}

Options

Name	Type	Default	Description
config	{Object}	undefined	Set postcss.config.js config path && ctx
plugins	{Array\|Function}	[]	Set PostCSS Plugins
sourceMap	{String\|Boolean}	false	Enable Source Maps
alias	{Object}	undefined	Set import alias

Plugins

webpack.config.js

{
  loader: 'postcss-sass-loader',
  options: {
    ident: 'postcss',
    plugins: (loader) => [
      require('postcss-import')({ root: loader.resourcePath }),
      require('postcss-preset-env')(),
      require('cssnano')()
    ]
  }
}

alias

webpack.config.js

{
  test: /\.s[ca]ss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-sass-loader',
      options: {
        alias: {
            "@test": "/home/test"
        }
      }
    }
  ]
}

⚠️ webpack requires an identifier (ident) in options when {Function}/require is used (Complex Options). The ident can be freely named as long as it is unique. It's recommended to name it (ident: 'postcss')

Examples

Autoprefixing

webpack.config.js

{
  test: /\.s[ca]ss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-sass-loader',
      options: {
        plugins: [
          require('autoprefixer')({...options}),
          ...,
        ]
      }
    }
  ]
}