Vue使用@import 引入样式文件全局污染、使用scoped失效问题

scoped

在组件中的style使用@import方式引入外部css，发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。

<style lang="scss" scoped>
	@import url("/style/index.scss") 
<style>

上面这种情况即时加入了scoped也无效，样式一样会污染到其他地方。

所以改写成src的方式引入。

<style lang="scss"  src="/style/index.scss"  scoped>

<style>
<style scoped>
...组件的其他样式
</style>

按道理来说这边是ok的了。但是我写的代码结构是这样子的。

//index.css
@import url('./loElementStyle.scss');
@import url('./loStyle.scss');
@import url('./standard.scss');

然后把这个index.scss引入了组件中去，发现不管使用@import方式还是src引入方式都不起效。后来排查了半天才发现index.scss的引入也有问题。应该要这鸭子：

@import './loElementStyle.scss';
@import './loStyle.scss';
@import './standard.scss';

问题所在：

• @import并不是引入代码到里面，而是发起新的请求获得样式资源。
• 在style里采用src=“外部样式路径”引入到当前组件。