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

Posted 2023-02-22

【中文标题】如何在 webpack 中使用 postcss-loader 和 sass-loader

【英文标题】：How to use postcss-loader with sass-loader in webpack

【发布时间】：2021-04-18 05:22:41

【问题描述】：

我正在尝试构建一个 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 的顺序，以便在postcss 加载程序处理供应商前缀之前让sass 加载程序处理导入和其他非标准css 功能。所以我的设置改为：

...
'sass-loader',

    loader: 'postcss-loader',
    options: 
        config: 
            path: 'postcss.config.js'
        
    
,
...

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

如何正确配置此设置？

【参考方案1】：

我不确定我在这里说的内容对你有多大帮助，因为我从未使用过 postcss 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"
            
        ]
    ,

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

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

还有一个.browserslistrc：

last 2 versions
> 0.5%
IE 10

如果我没记错的话，postcss-loader 默认会查找配置文件。无需添加带有指向它的路径的选项。另外，postcss 预设环境在一定程度上包含了 autoprefixer。

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

【讨论】：

@MikeHawkins 我很高兴能帮上忙 :)