Модули css в приложении create-react-app не работают в продакшене (heroku)

Я прочитал все возможные вопросы по этой теме, но не нашел ничего, что могло бы мне помочь.

Я создаю приложение для реагирования с помощью приложения create-response-app и хочу использовать модули css. Поэтому я меняю файлы weback, найденные в node_modules / response-scripts / config, потому что я не хочу «извлекать» файлы конфигурации.

На dev все работает хорошо, и он распознает модули, но на производстве он не работает. (в dev все равно не существует плагина ExtractTextPlugin)

Итак, в последний раз я пытаюсь «извлечь» файлы конфигурации, а затем меняю prod-файл веб-пакета, который находится в src / config, и он работает, но я действительно не хочу извлекать для этого все файлы конфигурации.

Я также пытаюсь скопировать точно такой же файл web pack.config.prod.js, который работает после извлечения, но по какой-то причине это не помогает

это код из моего веб-пакета pack.config.prod.js:

        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          Object.assign(
            {
              fallback: {
                loader: require.resolve('style-loader'),
                options: {
                  hmr: false,
                },
              },
              use: [
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    modules: true,
                    localIdentName: '[name]__[local]__[hash:64:5]',
                    //   minimize: true,
                    //   sourceMap: shouldUseSourceMap,
                  },
                },
                {
                  loader: require.resolve('postcss-loader'),
                  options: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebookincubator/create-react-app/issues/2677
                    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',
                      }),
                    ],
                  },
                },
              ],
            },
            extractTextPluginOptions
          )
        ),
        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.

Я пробую много других конфигураций для этого в файле prod, но ничего не влияет на prod.

tnx все


webpack create-react-app react-css-modules heroku webpack-style-loader
person OriEng    schedule 01.07.2018    source источник
comment
Что вы действительно спрашиваете? Не все было ясно.   -  person PlayMa256    schedule 02.07.2018
comment
Очень просто: как сделать так, чтобы модули работали с приложением Creative React в продакшене. У меня ничего не работает.   -  person OriEng    schedule 02.07.2018

Ответы (1)


arrow_upward
0
arrow_downward

Извлечь приложение create-response-app

Изменить webpack.config.prod.js

Заменять:

{
  loader: require.resolve('css-loader'),
  options: {
   importLoaders: 1,
   minimize: true,
   sourceMap: shouldUseSourceMap,
  },
},

К этому:

{
  loader: require.resolve('css-loader'),
  options: {
   importLoaders: 1,
   minimize: true,
   modules: true
   sourceMap: shouldUseSourceMap,
  },
},
person PlayMa256    schedule 01.07.2018
comment
tnx, я пробую это, но это работает только на dev - к сожалению, не в производственном режиме - person OriEng; 02.07.2018
comment
Он работает, если нет, откройте проблему с css-loader с вашей конфигурацией и посмотрите, что они говорят - person PlayMa256; 02.07.2018
comment
Что он делает, так это то, что он извлекает css из js и помещает в файл css. Это только то, что он делает. - person PlayMa256; 02.07.2018