0
1.
<style scoped>
    @import '../../assets/css/home.css';  
</style>
/*这样写的话import的css文件会被编译为全局样式,最后直接通过style标签加在页面中*/

2.
<style src="../../assets/css/home.css" scoped>
</style>
/*这样写的css文件中的样式只能在本组件中使用,而不会影响其他组件*/

后来,我找了一下关于css-loader和style-loader的资料,粗略了解它们的工作原理,有一种说法是css-loader对import的文件会当做外部资源,那么我能理解为它是把import的css文件单独提取出来,并没有把其中的样式放在<style scoped>中解析,而是最后把<style>中计算结果和import的css文件混合后,交由style-loader最后解析为style标签加载在页面里吗?

在<style>中import的css文件是怎么处理的,和<style>其他裸样式的加载顺序有什么不一样吗?(我在一个地方看到有一个说法是import的css文件会等到dom树下载完才会被加载?)import的原理是什么?

1 个回答

0

我也不是很明白你的疑问,推荐一个vue-loader的文档吧,看能不能解决你的困惑。