webpack單獨構建scss文件與.vue組件里構建scss的一個坑

　　在入口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的文件里。