postcss 不能与 webpack 5 和 sass 结合使用

Posted

技术标签:

【中文标题】postcss 不能与 webpack 5 和 sass 结合使用【英文标题】:postcss is not working in combination with webpack 5 and sass 【发布时间】:2021-02-18 12:24:04 【问题描述】:

我使用 webpack 5 和最新的 css/postcss/sass 包。现在我得到错误

  Module not found: Error: path argument is not a string

如果我删除 postcss 加载器,它可以工作。

就是代码

            rules: [
            test: /\.s?css/i,
            use: [
                MiniCssExtractPlugin.loader,
                
                    loader: 'css-loader',
                    options: 
                        sourceMap,
                        url,
                        importLoaders: 1,
                    
                ,
                
                    loader: require('postcss-loader').loader,
                    options: 
                        sourceMap,
                        postcssOptions: 
                            plugins: [
                                require('postcss-import')(),
                                require('cssnano')(),
                                require('autoprefixer')(autoprefixerOptions),
                                require('postcss-merge-rules')(),
                                require('postcss-object-fit-images'),
                            ],
                        ,
                    ,
                , 
                    loader: 'sass-loader',
                
            ]
        ,]

【问题讨论】:

【参考方案1】:

好的,我解决了。

原来是这样

loader: require.resolve('postcss-loader'),

而不是

require('postcss-loader').loader

【讨论】:

以上是关于postcss 不能与 webpack 5 和 sass 结合使用的主要内容,如果未能解决你的问题,请参考以下文章

如何让 postcss-loader、postcss-cssnext 和 sass-loader 在 webpack 中协同工作?

无法让 PostCSS 与 Webpack 一起使用

Webpack 中带有 sass-loader 和 postcss-loader 的 sourceMap

使用 webpack 和 postcss-loader 导入字体很棒

带有 less 和 postcss 自动前缀的 webpack

Webpack + postcss + 主题 + 热加载