在写单文件组件时,一般都是把标签,脚本,样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去。
在局部作用域(作用域)采用@ import加载进来的样式文件,想法是美好的。以为这样加载进来的样式文件也只对当前组件有效,可现实是残酷的,这样加载进来的样式无法限制其作用域。
采用src属性加载样式。
<代码> & lt;风格src=" https://www.yisu.com/zixun/样式路径”scoped> & lt;/style>
在写单文件组件的项目时,遇到过这样的问题。某一个样式类,明明我只写了两个填充,但是在我用<代码> webpack 构建之后,莫名其妙的多出了很多其他的样式。
后来,无意中看见别人的提问中,说如何解决单文件组件中样式同名的问题。
我就想,会不会是不同的.vue文件里使用了同名类的原因。
于是,我在风格标签后面加上了作用域这个关键字之后,再npm运行构建,果然好了。
<强>原因:
不加范围表示样式是全局共享的。
加上了作用域就是这个样式只能在这个.vue文件里面有效。
以上所述是小编给大家介绍的解决vue单文件组件中样式加载问题,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
