Vue局部引入样式

Vue全局引入样式

首先说一下全局样式的引入方式
1.在script标签中使用import导入

<script>
	import "base.css"; //引入全局样式
</script>

2.在style标签中使用@import导入
我想强调的是这种方式，不知道从什么时候开始，@import导入的css样式也会变成全局样式，怀疑可能和css-loader的更新有关，现在能搜到的很多方案都还是使用@import引入局部样式，但这种方式已经行不通了，会将样式变为全局样式。

<style>
	@import "base.css";   //引入全局样式
	@import url("base.css") //引入全局样式
</style>

Vue引入局部样式

1.使用style标签通过src引入样式才会变成局部样式，@import会自动升级为全局样式，避坑。

<style src="base.css" scoped></style> //引入局部样式