Vue не применяя класс стиля

Question

У меня есть однофайловые компоненты, которые построены со следующей конфигурацией Webpack:

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]

Я использую тег <style scoped> для стилизации своих компонентов. Это работает с селекторами тегов (например, nav), но селекторы классов (например, .content) не приводят к стилю. DOM содержит соответствующие классы, но сгенерированный файл dist/main.js содержит только селектор content_xgKyi9qt[data-v-ab83c772], который не применяется, поскольку компонент имеет только необработанный класс content.

Answer 1

Оказывается, использованные мной опции vue-style-loader вызывают искажение имени.Я решил переключиться с <style scoped> на <style module> и использовать вместо этого синтаксис <div :class="$style.content">.

Это приводит к тому, что класс элемента соответствует искаженному имени и обеспечивает уровень изоляции для стиля.