vue书写样式的两种方式

2019-03-25  本文已影响0人  lesdom

方式一

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

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深度作用选择器

网站导航

网站导航

上一篇 下一篇

猜你喜欢

热点阅读