Vue没有应用样式类答案

【问题标题】：Vue not applying style classVue没有应用样式类
【发布时间】：2019-08-17 22:45:36
【问题描述】：

我有使用以下 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 类。

【问题讨论】：

分享 gitrepo 链接到你的代码
分享控制台图片，我们可以一起看到 HTML 元素和样式。

标签： javascript css vue.js webpack

【解决方案1】：

原来我使用的vue-style-loader 选项导致名称损坏。我决定从<style scoped> 切换到<style module> 并改用<div :class="$style.content"> 语法。

这会导致元素的类与损坏的名称相对应，并为样式提供一定程度的隔离。

【讨论】：