Vue如何防止引入外部css导致的全局污染

Question

问题描述

因为需要多套样式，所以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

Answer 1

<script lang="less" scoped>
import "xx.less"
</sciprt>

这样试试?