Vue——组件4:css作用域、配置Scss加载器

385 阅读1分钟

给组件设置css样式(引入css作用域):

image.png

当我们将两个组件的属性名设置为一致的,就会发现后面两个组件的css样式是一样的.

这是因为vue在打包的时候,会将所有的组件集合在一起,同时,也意味着css样式也会集合在一起,那么,就看导入到App.vue文件中的先后顺序样式优先级

image.png

css作用域:

全局样式的写法:

1.在vue文件中的style中写的样式,打包后就是全局样式

2.写一个css文件,在项目中导入,就是全局样式

注意:如果全局样式出现了相同的选择器,就看是哪个最后打包引入到项目,哪个的优先级就更高

局部样式的实现和原理:

在style标签中添加一个scoped属性(scoped="scoped"

原理:

就是vue的插件webpack打包时,会

1.把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名

2.并且为添加了scoped的style中的样式选择器添加一个属性选择器。

注意:组件中可以出现多个style标签

配置Scss:

在小黑窗内下载vue sass-loader插件:

1. vue create 项目的名字

2. 选择第三个选项:选择更多

3. 然后再选择CSS Pre-processors

4. 然后再选择Sass/SCSS (with dart-sass)

当新的vue文件创建完毕,我们会发现style标签上添加了一个属性lang=“scss”

image.png