CSS-модули в create-реагировать-приложение не работает в производстве (heroku) - PullRequest
Новая
       48

CSS-модули в create-реагировать-приложение не работает в производстве (heroku)

0 голосов
/ 01 июля 2018

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

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

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

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

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

это код из моего web 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 all

1 Ответ

0 голосов
/ 02 июля 2018

Eject create-Reaction-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,
  },
},
...