博客

css @import踩坑

事情起因

<style lang="less" scoped>
@import "aa";

</style>

在a文件引入后，本以为是可以局部引用，不会污染全局变量

但在写b文件，没有引用该less文件时，却有一些奇怪的样式

当时查看chrome浏览器的控制台后，发现重名类名，被给予

了a中的样式，开始怀疑是否是**@import**会使其全局引入

@import并不是直接将目标文件的代码引入到使用的文件中来，而是发起了一个新的请求，获得相应资源，这个时候并没有加私有限制scoped，因此这种方式引入的文件将作用于全局。

解决办法

<style src="./aa.less"  scoped></style>

但是使用这种方式引入less的时候出现了报错

./src/App.vue?vue&type=style&index=0&lang=css& 

因为当时修改了之前使用@import引入aa的几个vue文件

在尝试了安装css-loader，style-loader无果后

将其还原后恢复

（怀疑是同时存在两个style标签，一个标签为src一个为普通页面内样式）