如何在webpack中使用postpass加载程序和sass加载程序

Question

我正在尝试构建一个webpack配置，该配置可以转换我的sass并使用postpass autoprefixer插件。

在研究并尝试了各种解决方案后，我提出了以下设置：

webpack.config.js:

...
{
test:  /.(sa|sc|c)ss$/,
exclude: [/node_modules/, /css/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
url: false,
}
},
{
loader: 'postcss-loader',
options: {
config: {
path: 'postcss.config.js'
}
}
},
'sass-loader',
]
}
...

postpass.config.js:

module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 2 versions']
})
]
}

当我运行此程序时，我收到以下错误：

ERROR in ./themes/kredslob/scss/main.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "partials/mixins";
| @import "footer";
| @import "header";

这是有道理的，因为postpass没有配置插件来正确处理导入。然后，我尝试更改postcss-loader和sass-loader的顺序，让sass加载程序处理导入和其他非标准css功能，然后再由postcss加载程序处理供应商前缀。所以我的设置被更改为：

...
'sass-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: 'postcss.config.js'
}
}
},
...

但是，我仍然收到与之前描述的相同的错误。

如何正确配置此设置？

Answer 1

我不确定我在这里所说的对你有多大帮助，因为我从未使用过postpass autoprefixer插件。但它来了：

我的webpack配置中的模块属性通常如下所示：

module: {
rules: [
{
test: /.s?css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader']
},
{
test: /.js$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
},

然后，我倾向于有一个单独的postpass配置文件：

module.exports = {
plugins: ['postcss-preset-env']
}

还有一个.browserslistrc：

last 2 versions
> 0.5%
IE 10

如果我没有记错的话，postpass加载程序默认情况下会查找配置文件。不需要添加路径指向它的选项。此外，postpass预置env在一定程度上包括autoprefixer。

现在，值得一提的是broswerslist引入了一个错误——它阻止了自动重新加载。为了仍然利用它，您只能在为生产构建时设置它。