在入口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. 自定义npm包——typeScript版本

    前言 这篇文章是在我之前的文章 [自定义npm包的创建.发布.更新和撤销] 的基础上做的扩展,主要是针对如何创建以及发布一个typeScript语言的npm包. 大纲 1.创建关于typeScript ...

  2. 克隆windows 2008 x64 后网络问题

    克隆windows 2008 x64 后,网卡中配置IP地址192.168.199.40 (NAT 模式) 内网无法ping 通该机器. 使用ipconfig 查看IP显示为 169.254.203. ...

  3. OC学习篇之---Foundation框架中的其他类(NSNumber,NSDate,NSExcetion)

    1.NSNumber 这个类主要是用来封装基本类型的,说到这里,就不得不说一下了: OC中的集合是不允许存入基本类型的,所以NSNumber类就诞生了,需要将基本类型封装一下,然后存进去,这个类似于J ...

  4. ios 不支持屏幕旋转

    - (NSUInteger)supportedInterfaceOrientations { return UIInterfaceOrientationMaskPortrait; }

  5. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

  6. MySQL之SQL mode——检查官

    原文:MySQL之SQL mode--检查官 MySQL升级后代码出bug? 前段时间,测试的MySQL服务器进行了一次升级,从MySQL5.6升级到了MySQL5.7.以为是简单的升级,不会影响到代 ...

  7. hibernate---java.lang.UnsupportedOperationException: The user must supply a JDBC connection

        在配置hibernate时.运行代码时一直抛错: Exception in thread "main" java.lang.UnsupportedOperationExce ...

  8. ETL概述 分类: H2_ORACLE 2013-08-23 10:36 344人阅读 评论(0) 收藏

    转自:http://blog.csdn.net/leosoft/article/details/4279536 ETL,Extraction-Transformation-Loading的缩写,中文名 ...

  9. 程序猿的还有一出路:大数据project师

    非常多年前我非常郁闷地写了一篇博客<程序猿的出路在哪里?>,之所以郁闷.我记得是看了中国男足的比赛,不由自主对照自已苦逼的程序猿生涯,以前对中国软件的感情有如对中国男足,绝望到没有不论什么 ...

  10. 二:新浪微博:第三方框架管理工具CocoaPods的安装和使用

    一:CocoaPods的安装 我们可以用淘宝的Ruby镜像来访问cocoapods.按照下面的顺序在终端中敲入依次敲入 $ gem sources --remove https://rubygems. ...