时间戳

首页 > 解决方案 > 对 Vue CLI 项目中的所有 CSS 类名进行散列或添加前缀以避免类继承

css - 对 Vue CLI 项目中的所有 CSS 类名进行散列或添加前缀以避免类继承

问题描述

prefix_当我将应用程序嵌入现有 HTML 页面时，我需要对 Vue CLI 项目中的所有 CSS 类名进行散列（或只是），以避免类继承。

基本上，我制作的 Vue 应用程序/小部件使用了一些 CSS 类名，例如、 、.title等.container，而我遇到的问题是，我嵌入这个 Vue 应用程序的网站上的全局 CSS 已经使用了类名，等等，所以它也将这些样式应用到我的 Vue 应用程序中。我只想要一种简单的方法——也许使用——来指示 webpack 随机散列或为 CSS 类名添加前缀，这样它们就完全唯一，并且不会继承任何父样式。谢谢.date.location.title.containervue.config.js

标签： cssvue.jswebpackvuejs2css-modules

解决方案

感谢上面的评论，我设法让它工作。实现并不像我希望的那样直接，因为它需要更改很多我现有的代码——我希望有一个更快、更简单的解决方案，它只需要我现有的代码并对预先存在的 CSS 类进行哈希处理——我'我很确定一定是可能的，因为这似乎是一项微不足道的任务？无论如何，这是我现在的设置：

vue.config.js

module.exports = {
 css: {
  requireModuleExtension: false,
  loaderOptions: {
   css: {
    modules: {
     localIdentName: '[hash:6]'
    }
   }
  }
 }
}

my-component.vue

<template>
 <div :class="$style.myClass"> ... </div>
</template>

<style module>
.myClass {
 color: red;
}
</style>

使用上述设置，我得到一个 div，而不是：

  <div class="myClass"> ... </div>

现在呈现为：

 <div class="_2d736c"> ... </div>

请注意标签上重要的module属性。<style>还要注意类名绑定：（:class或v-bind:class）不仅仅是class.

希望对某人有所帮助。谢谢

推荐阅读