vue动态引入css文件，打包后样式冲突

Question

根据不同条件引入不同的css样式。

if(条件a){
 import 'a.css'
}else if(条件b){
 import 'b.css'
}else if(条件c){
 import 'c.css'
}

a.css,b.css,c.css的类名都是一样的：

 a.css:
 .item{
  color:'#fff'
 }
 b.css:
 .item{
  color:'#333'
 }
 c.css:
 .item{
  color:'#666'
 }

根据不同条件，引入不同css。打包之前是可以的，打包以后本来满足条件a，但样式却不是条件a对应的样式。
应该是类名都相同打包后样式冲突的原因吧。
要给每个元素加多个类名，不同css文件里写对应类名的样式？？
有没有更好的解决办法？

Answer 1

1. 打包是静态的，打包之后的代码是固定的
2. 这种方法最好用后加载的方式，动态将需要的 css 插入页面当中
3. 可以将入口直接指向 css 文件，然后输出到目标文件夹里