方式一
这种方式可以直接书写第三方库的样式
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深度作用选择器
网友评论