如何结合gulp使用postcss

Posted 2023-05-12

　　PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS的目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的原则，PostCSS把扩展的语法和特性转换成现代的浏览器友好的CSS。使用Gulp工具，我们可以通过构建过程转换样式，就像Sass和Less的编译。 参考技术A http://www.tuicool.com/articles/Yr2YZvE
这篇文章不错 推荐下

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

【中文标题】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