vue-cli + sass 的正确打开方式图文详解


Posted in Javascript onOctober 27, 2017

关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案:

vue-cli + sass 的正确打开方式图文详解

但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法。且不说node-sass安装过程的各种坑,内嵌的<style>也让组件显得十分混乱。想象一下你在修改某个methods时必须拖动滚轮穿越几十上百行的css代码,又或者为了修改一组样式,却找不到对应的css文件,因为它们散布在vue文件里。。。

在我看来,正确的做法应该是单独管理sass文件,然后在main.js中直接引入编译好的css文件。像iView, ElementUI 都是采用这种做法。

如果你认同并且打算采用这种方式,看下面这个具体的例子:

vue-cli + sass 的正确打开方式图文详解

项目结构如上图,style文件夹下是分门别类的scss文件,方便管理和后期维护。然后在main.scss引入所有的scss样式片段,使用 sass --watch main.scss:main.css 命令监听并将scss文件编译为css文件。最后在main.js中引入main.css文件。这样你就可以直接在元素上添加class,然后在scss中畅快写样式了。

vue-cli + sass 的正确打开方式图文详解

当然我们不希望每次手动输入这些命令,初步想法是通过修改dev命令,:

vue-cli + sass 的正确打开方式图文详解

但是这样并不能达到效果,因为每次只会启动前一个命令。于是考虑到使用批处理来实现:

vue-cli + sass 的正确打开方式图文详解
vue-cli + sass 的正确打开方式图文详解

将这两个.bat放在根目录下,然后配置package.json:

vue-cli + sass 的正确打开方式图文详解

这样就可以使用 npm run dev 一键启动 hot reload 和 sass watch了。

总结

以上所述是小编给大家介绍的vue-cli + sass 的正确打开方式图文详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
js实现筛选功能
Nov 24 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 #Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 #Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 #Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
vue-resource拦截器设置头信息的实例
Oct 27 #Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 #Javascript
You might like
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php建立Ftp连接的方法
2015/03/07 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
flask项目集成swagger的方法
2020/12/09 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
学生会招新策划书
2014/02/14 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
医院搬迁方案
2014/06/14 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
人民币使用说明书
2019/04/17 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书