Я занимаюсь обновлением приложения Vue до webpack 5 и css-loader 4 (или 5). Я использую однофайловые компоненты с тегами <template> и <script>. Некоторые из моих компонентов используют стили с ограниченной областью видимости: <style scoped>.

После обновления до webpack 5 и css-loader 4 стили с ограничениями из моих компонентов vue были полностью пропущены webpack (насколько я могу судить).

Моя текущая конфигурация выглядит так:

{
  module: {
    rules: [
      // ... other rules omitted here
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: { modules: true }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: {
                // customize generated class names
                localIdentName: '[local]_[hash:base64:8]'
              }
            }
          }
        ]
      },
    ]
  }
  // ... more configuration here
}

Я пробовал внести ряд изменений:

  • заменить vue-style-loader на style-loader
  • добавить esModule: false к параметрам
  • добавить ident: 'css-loader-ident' в конфигурацию css-loader (тот же уровень, что и options)

До сих пор я не получил конфигурацию веб-пакета, которая будет вводить стили в окончательную разметку, не говоря уже о хеш-коде, специфичном для vue-component.

Идеи ?

2
ebbishop 25 Фев 2021 в 01:47

1 ответ

Лучший ответ

Оказывается, решение или одно из возможных решений следующее:

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

Я нашел это в основном методом проб и ошибок. Приветствуется дополнительная информация о том, что происходит / почему это работает.

0
ebbishop 25 Фев 2021 в 16:11