如何在 webpack 中使用 postcss-loader 和 sass-loader

如何解决如何在 webpack 中使用 postcss-loader 和 sass-loader

我正在尝试构建一个 webpack 配置来转换我的 sass 并利用 postcss 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',]
}
...

postcss.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";

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

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

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

如何正确配置此设置？

解决方法

我不确定我在这里说的内容有多少对您有帮助，因为我从未使用过 postcss autoprefixer 插件。但它是这样的：

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

with toupdate as (
      select t.*,row_number() over (order by rank) as seqnum
      from #test t
      where Id = @id
     )
update toupdate
    set rank = seqnum - 1;

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

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

还有一个module.exports = { plugins: ['postcss-preset-env'] } ：

.browserslistrc

如果我没记错的话，postcss-loader 会默认寻找一个配置文件。无需添加路径指向它的选项。此外，postcss 预设环境在某种程度上包括 autoprefixer。

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