Блог

У меня есть однофайловые компоненты, которые создаются со следующей конфигурацией 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] селектор, который не применяется, поскольку компонент имеет только класс raw content .

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

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