未找到 PostCSS 配置

Posted 2023-02-22

【中文标题】未找到 PostCSS 配置

【英文标题】：No PostCSS config found

【发布时间】：2018-09-17 10:53:13

【问题描述】：

我正在尝试根据教程学习​​ 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
                ]
            
        ]
    
;

【参考方案1】：

在根目录下新建文件postcss.config.js并添加

module.exports = ;

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

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

【讨论】：

将postcss.config.js 文件与module.exports = 放在文件中对我有用。我在package.json 中看到有关人们将postcss-loader 依赖项降级为1.0.0 的其他线程，但这似乎不起作用。这是修复！谢谢。

我也确认了这一点

【参考方案2】：

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

         
           loader: `postcss-loader`,
           options: 
             options: ,
           
         ,

【讨论】：

然后我得到：You did not set any plugins, parser, or stringifier 错误

在 webpack 配置中的确切位置？

【参考方案3】：

这里有一个更大的 kontrollanten 答案的 sn-p，以确定它的确切位置：

module: 
    rules: [
        
            test: /\.(scss)$/,
            resolve:  extensions: [".scss"], ,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                
                    loader: `postcss-loader`,
                    options: 
                        options: ,
                    
                ,
                'resolve-url-loader?sourceMap',
                'sass-loader?sourceMap',
            ]
        
    ],
,

【参考方案4】：

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

         
            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',
        ],
      ,
    ],
  ,

【参考方案5】：

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