npm i -D postcss-sass-loaderpostcss.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'
]
}
]
}
}| 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 |
webpack.config.js
{
loader: 'postcss-sass-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-preset-env')(),
require('cssnano')()
]
}
}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) inoptionswhen{Function}/requireis used (Complex Options). Theidentcan be freely named as long as it is unique. It's recommended to name it (ident: 'postcss')
webpack.config.js
{
test: /\.s[ca]ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-sass-loader',
options: {
plugins: [
require('autoprefixer')({...options}),
...,
]
}
}
]
}