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

上一篇:仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题


下一篇:webpack构建vue项目(再谈配置)