问题描述
因为需要多套样式,所以CSS只能独立出来,但是独立之后出现了全局污染的情况,之前写在组件中的时候可以用scoped,但是现在从外部引入的话怎么弄
按需加载,在组件created
中调用
let theme = 'default'
const GETCSS = (name) => {
return require(`../../static/css/${theme}/${name}.less`)
}
export default GETCSS;
组件中:
created(){
this.$GETCSS('name')
}
组件样式中:
// 父组件
.box{
color:red
}
// 子组件
.box{
color:black
}
// 结果box为red
<script lang="less" scoped>
import "xx.less"
</sciprt>
这样试试?