vue中使用css modules替代scoped

Posted 2023-04-18

参考技术A

  最开始使用Vue的时候，是提倡并大量使用的是scoped的。

  加上 scoped 属性的style会自动添加一个唯一的属性 。比如data-v-0467f817为组件内 CSS 指定作用域，编译的时候 .errShow会被编译成类似 .errShow[data-v-0467f817]。

  这种添加唯一的属性的方法可以满足日常组件局部css作用域的开发需求，但其设计上有一定缺陷，.errShow[data-v-0467f817]并不能保证是唯一的，另外在性能上也不是很好，浏览器搜索.errShow[data-v-0467f817]的速度并不如.errShow，相比于这种方式，CSS modules则做的更彻底，它不是添加属性，而是直接改变类名。

CSS Modules
　　CSS Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。

用法

配置
　　如果你的项目是用vue-cli搭建的，那么脚手架已经为你配置好了，直接可以使用，如果你是用webpack自己搭建的项目或想要修改默认配置，则进行下面配置。

css-loader关于CSS modules的默认配置如下：

可以使用vue-loader的css Modules选项为css-loader进行自定义的配置

将 Bootstrap/Bootstrap-Vue 导入 Scoped CSS

【中文标题】将 Bootstrap/Bootstrap-Vue 导入 Scoped CSS

【英文标题】：Importing Bootstrap/Bootstrap-Vue into Scoped CSS

【发布时间】：2019-10-10 11:38:09

【问题描述】：

我正在开发一个 chrome 扩展，并在我的 Vue 文件上使用 Bootstrap-Vue。目前，我将 bootstrap/bootstrap-vue 导入到我的 js 文件中，但这会导致样式在全局级别上进行。理想情况下，我希望引导程序仅适用于我插入的文件。 Vue文件的部分有没有办法做到这一点？

//在.js文件中

import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'; 

//我在vue文件里试过了，没有效果

<style scoped src="bootstrap/dist/css/bootstrap.css"></style>
<style scoped src="bootstrap-vue/dist/bootstrap-vue.css"></style>

【参考方案1】：

要仅在组件中导入样式，请在 <style> 标签内使用它

  @import 'bootstrap/dist/css/bootstrap.css';
  @import 'bootstrap-vue/dist/bootstrap-vue.css';

【讨论】：

如果你这样做，样式会在组件外泄漏。

【参考方案2】：

何塞的回答几乎是正确的：

<style scoped>
@import 'bootstrap/dist/css/bootstrap.css';
@import 'bootstrap-vue/dist/bootstrap-vue.css';
</style>