vue 中 scoped的用法 以及css文件引入問題的補充

自：https://blog.csdn.net/weixin_39941429/article/details/80254724

下面再說說VUE中scoped的編譯原理吧。具體可以參考vue-loader

所謂的局部css，就是通過vue-loader這個插件，在編譯打包的時候將帶有scoped屬性的css打上一個tag，同時將template內的所有html都打上一個相同的tag，最后通過css的屬性選擇器定位，造就了所謂的局部css。參考scoped內復寫組件樣式

css-loader對import的文件會當做外部資源，那么我能理解為它是把import的css文件單獨提取出來，並沒有把其中的樣式放在<style scoped>中解析，而是最后把<style>中計算結果和import的css文件混合后，交由style-loader最后解析為style標簽加載在頁面里。解決辦法如下：

1、

<style scoped>
    @import '../../assets/css/home.css';  
</style>
/*這樣寫的話import的css文件會被編譯為全局樣式，但是引入less等預編譯文件，就>會局部生效*/

2、

<style src="../../assets/css/home.css" scoped>
</style>
/*這樣寫的css文件中的樣式只能在本組件中使用，而不會影響其他組件*/