webpack单独构建scss文件与.vue组件里构建scss的一个坑

最新推荐文章于 2022-01-20 10:50:48 发布

weixin_30822451

最新推荐文章于 2022-01-20 10:50:48 发布

阅读量162

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/zhansu/p/6418886.html

版权

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

转载于:https://www.cnblogs.com/zhansu/p/6418886.html

关注