javascript - 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">语法代替。

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