Конфигурация PostCSS не найдена

Я пытаюсь научиться реагировать в соответствии с учебником. Между тем, в учебном пособии указывается использовать веб-пакет для компиляции таблиц стилей и ресурсов JS. Я застрял в ошибке, когда таблицы стилей не могут быть скомпилированы, и выдает следующую ошибку при компиляции файла с помощью веб-пакета. Отображается следующая ошибка:

   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
                }]
            }
        ]
    }
};
Источник

5 ответов

Решение

Сделал новый файл в корневом каталоге с именем postcss.config.js и добавил

module.exports = {};

Нашел это в следующем посте:

/questions/1368695/uncaught-oshibka-sborka-modulya-ne-udalas-oshibka-konfiguratsiya-postcss-ne-najdena-v-ng2-adminnodemodulesbootstrap-loader-pri-oshibke-sobstvennaya/1368704#1368704

Источник

Если вы не хотите добавлять другой файл, достаточно добавить параметры в конфигурацию вашего веб-пакета:

         {
           loader: `postcss-loader`,
           options: {
             options: {},
           }
         },
Источник

Вот более крупный фрагмент ответа 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',
            ]
        }
    ],
},
Источник

Если у кого-то такая же проблема, но приведенные выше исправления по-прежнему не решают проблему, попробуйте обновить версию до 4.2.0(веб-пакет 4). Это устранило проблему для меня. Мой postcss-loader был 2.0.9 и я пытался заставить работать сборник рассказов после значительного обновления других зависимостей.

Источник

Вы можете использовать это, если не хотите добавлять новый файл конфигурации.

         {
            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',
        ],
      },
    ],
  },
Источник
Другие вопросы по тегам