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的文件里。
webpack单独构建scss文件与.vue组件里构建scss的一个坑的更多相关文章
- vue cli4构建基于typescript的vue组件并发布到npm
基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...
- [bug]——vue 组件状态外置引发的一个 bug
背景 在编写 .vue 组件时,可以将状态外置来获取一些额外的好处,譬如有这么一个组件(global-components.vue): <template> <div> < ...
- vue组件里不用的css还在搜索过滤来删除?试一下vue-clearcss吧!
这篇文章其实是推广介绍我个人的npm工具库,但你不会后悔点进来的(应该吧...)vue-clearcss 为什么要用它? 一个vue文件在长期迭代中css会越来越冗余,它不像html和js那么好删除, ...
- vue组件里定时器销毁问题
我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样是非常消耗性能的.如下图所示: 解决方法1: 首先我在data函数里面进行定义定时器名称: data( ...
- 使用vue.js路由踩到的一个坑Unknown custom element
在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...
- webpack 单独打包指定JS文件
背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChun ...
- webpack 单独打包指定JS文件(CopyWebpackPlugin)
背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...
- 手把手教你封装 Vue 组件并使用 NPM 发布
Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...
- Vue.js 学习笔记之四:Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
随机推荐
- 自定义npm包——typeScript版本
前言 这篇文章是在我之前的文章 [自定义npm包的创建.发布.更新和撤销] 的基础上做的扩展,主要是针对如何创建以及发布一个typeScript语言的npm包. 大纲 1.创建关于typeScript ...
- 克隆windows 2008 x64 后网络问题
克隆windows 2008 x64 后,网卡中配置IP地址192.168.199.40 (NAT 模式) 内网无法ping 通该机器. 使用ipconfig 查看IP显示为 169.254.203. ...
- OC学习篇之---Foundation框架中的其他类(NSNumber,NSDate,NSExcetion)
1.NSNumber 这个类主要是用来封装基本类型的,说到这里,就不得不说一下了: OC中的集合是不允许存入基本类型的,所以NSNumber类就诞生了,需要将基本类型封装一下,然后存进去,这个类似于J ...
- ios 不支持屏幕旋转
- (NSUInteger)supportedInterfaceOrientations { return UIInterfaceOrientationMaskPortrait; }
- css 单行图片文字水平垂直居中汇总
(1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...
- MySQL之SQL mode——检查官
原文:MySQL之SQL mode--检查官 MySQL升级后代码出bug? 前段时间,测试的MySQL服务器进行了一次升级,从MySQL5.6升级到了MySQL5.7.以为是简单的升级,不会影响到代 ...
- hibernate---java.lang.UnsupportedOperationException: The user must supply a JDBC connection
在配置hibernate时.运行代码时一直抛错: Exception in thread "main" java.lang.UnsupportedOperationExce ...
- ETL概述 分类: H2_ORACLE 2013-08-23 10:36 344人阅读 评论(0) 收藏
转自:http://blog.csdn.net/leosoft/article/details/4279536 ETL,Extraction-Transformation-Loading的缩写,中文名 ...
- 程序猿的还有一出路:大数据project师
非常多年前我非常郁闷地写了一篇博客<程序猿的出路在哪里?>,之所以郁闷.我记得是看了中国男足的比赛,不由自主对照自已苦逼的程序猿生涯,以前对中国软件的感情有如对中国男足,绝望到没有不论什么 ...
- 二:新浪微博:第三方框架管理工具CocoaPods的安装和使用
一:CocoaPods的安装 我们可以用淘宝的Ruby镜像来访问cocoapods.按照下面的顺序在终端中敲入依次敲入 $ gem sources --remove https://rubygems. ...