在入口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的一个坑的更多相关文章

  1. vue cli4构建基于typescript的vue组件并发布到npm

    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...

  2. [bug]——vue 组件状态外置引发的一个 bug

    背景 在编写 .vue 组件时,可以将状态外置来获取一些额外的好处,譬如有这么一个组件(global-components.vue): <template> <div> < ...

  3. vue组件里不用的css还在搜索过滤来删除?试一下vue-clearcss吧!

    这篇文章其实是推广介绍我个人的npm工具库,但你不会后悔点进来的(应该吧...)vue-clearcss 为什么要用它? 一个vue文件在长期迭代中css会越来越冗余,它不像html和js那么好删除, ...

  4. vue组件里定时器销毁问题

    我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样是非常消耗性能的.如下图所示: 解决方法1: 首先我在data函数里面进行定义定时器名称: data( ...

  5. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  6. webpack 单独打包指定JS文件

    背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChun ...

  7. webpack 单独打包指定JS文件(CopyWebpackPlugin)

    背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...

  8. 手把手教你封装 Vue 组件并使用 NPM 发布

    Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...

  9. Vue.js 学习笔记之四:Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

随机推荐

  1. python基础-合并列表

    1.append()  向列表尾部追加一个新元素,列表只占一个索引位,在原有列表上增加 2.extend() 向列表尾部追加一个列表,将列表中的每个元素都追加进来,在原有列表上增加 3.+  直接用+ ...

  2. 基于bootstrap的主流框架有哪些

    基于bootstrap的主流框架有哪些 一.总结 一句话总结:其实可以直接百度bootstrap后台模板,出来一大堆,想用哪个用哪个. 二.[前端框架系列]浅谈当前基于bootstrap框架的几种主流 ...

  3. java学习笔记之基础语法(二)

    1.数组: 概念:同一种类型数据的集合,其实,数组就是一个容器 优点:可以方便的对其进行操作,编号从0开始,方便操作这些元素. 2,数组的格式 元素类型[]数组名=new 元素类型[数组元素个数]: ...

  4. Shiro的Filter机制详解---源码分析(转)

    Shiro的Filter机制详解 首先从spring-shiro.xml的filter配置说起,先回答两个问题: 1, 为什么相同url规则,后面定义的会覆盖前面定义的(执行的时候只执行最后一个). ...

  5. python3 序列

    python中有很多内置序列 列表 元组 字符串 python中容器的概念 列表 元组 字符串 字典 集合 是可以改变的,元组不可改变 几乎可以在所有情况下用列表代替元组,只有一种情况下,是不可以的, ...

  6. 移动开发之css3实现背景几种渐变效果

    移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观 ...

  7. thinkphp3.2使用join联合查询

    $members=$model->table('zhope_card A') ->join('zhope_user U ON A.adduser=U.id',"LEFT" ...

  8. 钢琴 - steinway

    http://www.wangyanpiano.com/bbs/thread-104723-1-1.html Poston 波士顿钢琴    三角钢琴    GP-156    黑色抛光    178 ...

  9. php thinkphp uploadify

    模板文件: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  10. CreateFeature与CreateFeatureBuffer区别

    转自原文CreateFeature与CreateFeatureBuffer区别 CreateFeature主要用于插入一条数据,CreateFeatureBuffer住哟啊用于插入多条数据,详细说明见 ...