标签: postcss-loader

目前我有以下 webpack 配置，工作正常：

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
    ],
  },
},

由于我在多个地方使用 postcss 配置，因此我想将其集中在postcss.config.js文件中。

我的 webpack 配置变成：

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    config: {
      path: './postcss.config.js'
    },
  },
}

我的 postcss.config.js 文件位于同一配置文件夹中，如下所示：

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'autoprefixer': {
      browsers: [
        '>1%',
        'last 4 …

我目前正在学习 sass/scss，并且正在尝试为实践项目设置 webpack 配置。所以我查找了我需要的工具和技术，一些资源建议我使用“node sass、sass-loader 和 css-loader”（webpack 文档），而另一个资源建议我使用 post-CSS 而不是 css-loader。我想知道其中的区别。

所以今天我一直在尝试将 postscss-loader 从 3.0.0 版本迁移到 4.0.2

我注意到从 4.0.0 版开始，他们添加了 postCSS 作为对等依赖项，所以我添加了 postcss 7.0.27 版。我没有选择 8，因为我也使用了“postcss-import”，这依赖于版本 7。这应该没问题，因为 postcss-loader 可以同时使用版本 7 和 8。

但是现在在运行时，我收到了所有 scss 文件的相同错误消息：

Error: [object Object] is not a PostCSS plugin

由于消息不是真正的描述性，解决问题已成为一种真正的试错方法。到目前为止没有成功。

这是我的 webpack.config.ts：

import postCSSImport from 'postcss-import';
import autoPrefixerFlexbox from 'postcss-flexbugs-fixes';
import autoPrefixer from 'autoprefixer';

const BrowserList = {
    mobile: ['android >= 4', 'ios >= 8'],
    desktop: ['firefox >= 40', 'chrome >= 49', 'edge >= 12', 'opera >= 47', 'ie >= 11', 'safari >= 9'],
    designer: ['firefox >= …

我正在尝试为使用 ES6 类的应用程序设置 webpack。我使用 Sass，但我也导入了一个供应商 css 文件。sass 部分被导入到sytle.scssuing @import。在我添加 postcss 加载器之前，它一切正常，但现在我在尝试编译时收到一条错误消息，但它失败了。

在webpack.config.js 中：

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css"
})

const config = {
    .
    .
    .

    module: {
        rules: [{
            test: /\.(scss|css)$/,
            use: extractSass.extract({
                use: [{
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }},
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    { 
                        loader: "css-loader", options: {
                        sourceMap: true,
                        importLoaders: 3,
                        modules: true
                    }}
                ],
                fallback: "style-loader"
            })
        }
       ]
      },
     plugins: [
        extractSass …