Блог

Я обновил webpacker с (4.0.0.pre.3) до (4.0.2), и, похоже, он больше не испускает мой CSS. На скриншоте показан журнал выдачи с (4.0.0.pre.3) и (4.0.2) справа.

My App.jsx — это моя точка входа, и она импортирует app.scss . У меня в моем babel.rc

 {
  presets: [
    '@babel/preset-react',
    ['@babel/preset-env', {
      targets: "last 2 versions"
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-export-default-from',
    ['react-css-modules', {
      'filetypes': {
        '.scss': {
          'syntax': 'postcss-scss'
        }
      },
      'generateScopedName': '[name]__[local]--[hash:base64:5]'
    }]
  ]
}
  

config/webpack/environment.js :

 const { environment } = require('@rails/webpacker')
const merge = require('webpack-merge')

const customCssLoaderOptions = {
  localIdentName: '[name]__[local]--[hash:base64:5]',
  // minimize: environment.NODE_ENV === 'production',
  modules: true
}

const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader')

CSSLoader.options = merge(CSSLoader.options, customCssLoaderOptions)

environment.config.set('entry.App', './app/javascript/packs/App.jsx')

module.exports = environment
  

Я закомментировал эту minimize опцию, потому что это приводило к разрыву новой версии, но я не думаю, что это приводит к тому, что мой CSS вообще не выводится?

config/webpack/development.js :

 const environment = require('./environment')

module.exports = environment.toWebpackConfig()
  

Не уверен, что это точная проблема, но, согласно руководству по обновлению Webpacker 4.x, вы должны заменить .babelrc файл на a babel.config.js (среди других изменений).

Однако я также обновляюсь до 4.x и по-прежнему не получаю CSS-эмиссии даже после всех шагов, описанных в этом руководстве. Если вам удалось решить проблему, пожалуйста, вернитесь, чтобы поделиться тем, как.

Редактировать:

Мой коллега только что сообщил мне, что файлы CSS (по крайней мере, в нашей кодовой базе Rails Webpacker) теперь должны быть filename.module.css import обновлены, и, конечно, оператор должен соответствовать.

Надеюсь, это поможет кому-то еще!

Не уверен, почему Webpacker 4 не выдает файлы CSS, но вы можете их использовать, обновив строку 20 в config/webpacker.yml настройках extract_css как true .

  19 # Extract and emit a css file
 20 extract_css: true