webpack單獨構建scss檔案與.vue組件裡構建scss的一個坑

標籤：webp   入口   地方   另一個   div   htm   lex   外掛程式   構建   

　　在入口main.js裡構建scss是通過引入模組的方式

import ‘./assets/_reset.scss‘;import ‘./assets/_flex.scss‘;import ‘./assets/_functions.scss‘;

　　在.vue組件裡是單獨構建的

<style lang="scss" scoped>    img {        width: rem(300px);    }    #product, .gallery, .detail {        width: rem(750px);    }   </style>

　　裡面的rem()是_functions.scss裡定義的一個scss函數

@function rem($px){    @return ($px / 40px) * 1rem;}

　　然而這個rem()函數一直用不了，找問題找了很長時間，當然最後還是解決了。

　　webpack在對main.js裡引入的scss編譯時間，分別把每一個scss檔案轉成了css檔案放在了html文檔的head裡面，這裡有3個scss就直接轉成了3個css檔案

放在了head裡（在webpack.config.js只引入scss的載入器，而不引入處理css外掛程式的情況下）。因此，_functions.scss裡的函數就沒用了，scss的函數只有在一個

完整的大scss裡才能對後面需要用到函數的地方起作用，而我們.vue裡的scss和_functions.scss不在一個檔案裡，因此scss函數失效了。

　　那有什麼辦法呢？

　　一個辦法就是把所有scss移出.vue，與所有scss檔案放一起，通過scss的@import方式組成一個大scss檔案，最後編譯成一個css檔案；

　　另一個辦法是將函數scss單獨通過@import的方式引入需要該函數的.vue的檔案裡。

webpack單獨構建scss檔案與.vue組件裡構建scss的一個坑