Проблемы с Webpack при настройке модулей Sass и CSS в React - PullRequest
Новая
       29

Проблемы с Webpack при настройке модулей Sass и CSS в React

0 голосов
/ 13 декабря 2018

Мое приложение не компилируется, и когда я пытаюсь установить npm, я вижу это: 

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

Однако, это только начало происходить, когда я добавил этот плагин в свой webpack.config.dev.js: 

new ExtractTextPlugin({ filename: 'styles.css', allChunks: true }),

и когда я пытаюсь запустить свое приложение, я получаю следующее:

/ Users / johnnynolan / Repos / clark-app / node_modules / webpack / lib / Chunk.js: 824 генерировать новую ошибку (^

Ошибка: Chunk.entrypoints: использовать Chunks.groupsIterable и вместо этого фильтровать по экземпляру Entrypoint в Chunk.get (/ Users / johnnynolan / Repos / clark-app / node_modules / webpack/lib/Chunk.js:824:9) в /Users/johnnynolan/Repos/clark-app/node_modules/extract-text-webpack-plugin/dist/index.js:176:48 в Array.forEach () в /Пользователи / johnnynolan / Repos / clark-app / node_modules / extract-text-webpack-plugin / dist / index.js: 171: 18 в AsyncSeriesHook.eval [как callAsync] (eval при создании (/ Users / johnnynolan / Repos / clark-app / node_modules / tapable / lib / HookCodeFactory.js: 32: 10),: 7: 1) в AsyncSeriesHook.lazyCompileHook (/ Users / johnnynolan / Repos / clark-app / node_modules / tapable / lib / Hook.js: 154: 20) в Compilation.seal (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Compilation.js:1214:27) в hooks.make.callAsync.err (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Compiler.js:547:17) в _done (eval при создании (/ Users / johnnynolan / Repos / clark-app / node_modules / tapable /)lib / HookCodeFactory.js: 32: 10),: 11: 1) в _err1 (eval при создании (/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/HookCodeFactory.js:32:10),:34:22)

1 Ответ

0 голосов
/ 13 декабря 2018

ExtractTextPlugin устарело.Вместо этого вы можете использовать style-loader, css-loader и postcss-loader, добавив приведенный ниже код в свой веб-пакет и установив необходимые пакеты. 

{
  test: /\.scss$/,
  use: [{
      loader: 'style-loader' // creates style nodes from JS strings
    },
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: "[name]_[local]_[hash:base64:5]"
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        modules: true,
        localIdentName: "[name]_[local]_[hash:base64:5]"
      } // compiles Sass to CSS
    },
    {
      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',
          }),
        ],
      },
    },
  ],
},
...