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

这将导致元素的类别与变形的名称相对应，并为样式提供一定程度的隔离。

Vue不应用样式类

1 个答案: