Install

``bash
npm i -D postcss-sass-loader
`

Usage

$3

postcss.config.js
`js
module.exports = {
plugins: [
require('autoprefixer')
]
}
`

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

webpack.config.js (recommended)
`js
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|

$3

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

$3

webpack.config.js
`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

$3

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