您可以为CSS和SCSS文件编写不同的规则,从而可以将Sass加载器从CSS文件中删除。
test: /\.scss$/,
use: [
{
loader: 'style-loader',
options: {
hmr: true
}
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'sass-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
}
}
]
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
hmr: true
}
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
}
}
]
以下是我个人关于CSS和SCSS文件的设置:
webpack.config.js
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 3,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
postcss.config.js
module.exports = {
plugins: [
require('postcss-cssnext')({
warnForDuplicates: false,
features: {
customProperties: false,
},
}),
require('postcss-flexbugs-fixes')(),
process.env.NODE_ENV === 'production'
? require('cssnano')({
preset: 'default',
})
: '',
],
};