vue书写样式的两种方式

方式一

这种方式可以直接书写第三方库的样式

home.vue

<div class="home">

</div>

style - home.scss

.home {

}

所有的vue单文件都有自己的样式文件，所有的样式文件都放在style文件夹中，为了防止各个文件之间的样式互相影响，为各个文件的最外层节点定义单独的类名区分。
将所有样式文件引入到一个文件中，最后在main.js文件中引入
style - index.scss

@import './home.scss';
@import './me.scss';

main.js

import '@/styles/index.scss'

方式二

在每个vue单文件中书写自己的样式，添加scoped属性。这种方式书写第三方库的样式时，需要使用深度作用选择器。

<style lang="less" scoped>

</style>

或者将样式提取成一个单独的文件

<style lang='less' scoped>
  @import './home.less';
</style>

相关参考

scoped私有作用域和deep selector深度作用选择器

网站导航

网站导航