44

我正在尝试根据教程学习​​ reactjs。同时教程指导使用 webpack 编译样式表和 JS 资产。我陷入了一个错误，即样式表无法编译并在使用 webpack 编译文件时引发以下错误。它显示以下错误：

   ERROR in ./src/stylesheets/hello.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/stylesheets/hello.css)
Module build failed: Error: No PostCSS Config found in: E:\developer\start\src\stylesheets
    at E:\developer\start\node_modules\postcss-load-config\index.js:51:26
    at <anonymous>
 @ ./src/stylesheets/hello.css 2:14-124
 @ ./src/lib.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js

我已经按照教程完成了所有工作，但不知何故，这个错误仍然存​​在并且无法解决这个问题，因为我对此很陌生。我的 webpack 配置文件 webpack.config.js 如下：

    module: {
        rules: [
           {
                test: /\.css$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "postcss-loader" // compiles Sass to CSS
                }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "postcss-loader" // compiles Sass to CSS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            }
        ]
    }
};
4

5 回答 5

96

在根目录中新建一个文件，命名postcss.config.js并添加

module.exports = {};

在以下帖子中找到了这个：

https://stackoverflow.com/a/41758053/5350097

于 2018-04-07T16:26:55.380 回答
24

如果您不想添加其他文件，只需在 webpack 配置中添加选项即可：

         {
           loader: `postcss-loader`,
           options: {
             options: {},
           }
         },
于 2018-06-02T20:59:23.703 回答
4

这是 kontrollanten 答案的更大片段，以确保将其准确放置在哪里：

module: {
    rules: [
        {
            test: /\.(scss)$/,
            resolve: { extensions: [".scss"], },
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: `postcss-loader`,
                    options: {
                        options: {},
                    }
                },
                'resolve-url-loader?sourceMap',
                'sass-loader?sourceMap',
            ]
        }
    ],
},
于 2020-03-26T22:12:09.703 回答
1

如果不想添加新的配置文件，可以使用它。

         {
            loader: `postcss-loader`,
            options: {
              options: {},
            }
          },

这是同时使用 MiniCssExtractPlugin 的例子。

module:{
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + '/';
              },
              hmr: process.env.NODE_ENV !== 'production',
            },
          },
          'css-loader',
          {
            loader: `postcss-loader`,
            options: {
              options: {},
            }
          },
          'sass-loader',
        ],
      },
    ],
  },
于 2020-07-23T06:30:27.857 回答
0

如果有人遇到同样的问题，但上面的修复仍然无法解决问题，请尝试更新postcss-loader到4.2.0(webpack 4) 的版本。这为我解决了这个问题。在大量更新其他依赖项之后，我和我postcss-loader都2.0.9试图让故事书工作。

于 2021-07-29T12:05:12.813 回答