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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
ES6中的类(Class)示例详解
Dec 09 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
Using the TextRange Object
2006/10/14 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python入门前的第一课 python怎样入门
2018/03/06 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
庆元旦广播稿
2014/02/10 职场文书
质量负责人任命书
2014/06/06 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
五好家庭申报材料
2014/12/20 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery