Javascript Vue未应用样式类

我有使用以下网页包配置构建的单文件组件：

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()
  ]

---

我使用

标记来设置组件的样式。这适用于标记选择器（例如

nav

），但类选择器（例如

.content

）不会产生样式。DOM包含相关的类，但生成的

dist/main.js

文件只包含

content\u xgKyi9qt[data-v-ab83c772]

选择器，该选择器未应用，因为组件只有原始

内容

类。

发现我使用的

vue样式加载程序

选项导致名称混乱。我决定从

切换到

，改为使用

语法

---

这将导致元素的类与损坏的名称相对应，并为样式设置提供一个隔离级别。

结果表明，我使用的

vue样式加载程序

选项导致名称损坏。我决定从

切换到

，改为使用

语法

---

这将导致元素的类与损坏的名称相对应，并为样式设置提供一个隔离级别。

共享gitrepo链接到控制台的代码共享图像，我们可以在其中一起查看HTML元素和样式。共享gitrepo链接到控制台的代码共享图像，我们可以在其中一起查看HTML元素和样式。