vue 页面的css样式代码多，怎么把css样式代码做成独立的文件，然后引用进来；以及style的scoped标签介绍以及scoped穿透介绍

vue 页面的css样式代码多，怎么把css样式代码做成独立的文件，然后引用进来

一、把css代码拷贝到一个独立的文件里

文件名：diy_index.css

二、全局引用

<style>
@import "../css/diy_index.css";
</style>

三、单页面引用

<style scoped>
@import "../css/diy_index.css";
</style>

四、什么是scoped

解释一：

在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

解释二：

在style中使用scoped的。则style标签里的css仅作用于当前页面。css对子组件不生效，可以在子组件的style标签里也使用scoped，这样可以使一个页面对应自己的css,避免影响到其他页面。

五、scoped穿透

scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。

stylus的样式穿透 使用>>>

外层 >>> 第三方组件

     样式

      

.wrapper >>> .swiper-pagination-bullet-active

 background: #fff

sass和less的样式穿透 使用/deep/

外层 /deep/ 第三方组件 {

    样式

}

.wrapper /deep/ .swiper-pagination-bullet-active{

  background: #fff;

}

---

延伸阅读

vue 页面的js代码多，怎么把js做成独立的文件，然后引用进来_cplvfx的博客-CSDN博客vue 页面的js代码多，怎么把js做成独立的文件，然后引用进来https://blog.csdn.net/cplvfx/article/details/125521105