vue-cli + sass 的正确打开方式
关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案:
但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法。且不说node-sass安装过程的各种坑,内嵌的<style>也让组件显得十分混乱。想象一下你在修改某个methods时必须拖动滚轮穿越几十上百行的css代码,又或者为了修改一组样式,却找不到对应的css文件,因为它们散布在vue文件里。。。
在我看来,正确的做法应该是单独管理sass文件,然后在main.js中直接引入编译好的css文件。像iView, ElementUI 都是采用这种做法。关于sass的文件结构,推荐这篇博客:管理Sass项目文件结构
如果你认同并且打算采用这种方式,看下面这个具体的例子:
项目结构如上图,style文件夹下是分门别类的scss文件,方便管理和后期维护。然后在main.scss引入所有的scss样式片段,使用 sass --watch main.scss:main.css 命令监听并将scss文件编译为css文件。最后在main.js中引入main.css文件。这样你就可以直接在元素上添加class,然后在scss中畅快写样式了。
当然我们不希望每次手动输入这些命令,初步想法是通过修改dev命令,:
但是这样并不能达到效果,因为每次只会启动前一个命令。于是考虑到使用批处理来实现:
将这两个.bat放在根目录下,然后配置package.json:
这样就可以使用 npm run dev 一键启动 hot reload 和 sass watch了。
vue-cli + sass 的正确打开方式的更多相关文章
- iOS开发小技巧--相机相册的正确打开方式
iOS相机相册的正确打开方式- UIImagePickerController 通过指定sourceType来实现打开相册还是相机 UIImagePickerControllerSourceTypeP ...
- Xcode 的正确打开方式——Debugging(转载)
Xcode 的正确打开方式——Debugging 程序员日常开发中有大量时间都会花费在 debug 上,从事 iOS 开发不可避免地需要使用 Xcode.这篇博客就主要介绍了 Xcode 中几种能 ...
- C#语法——泛型的多种应用 C#语法——await与async的正确打开方式 C#线程安全使用(五) C#语法——元组类型 好好耕耘 redis和memcached的区别
C#语法——泛型的多种应用 本篇文章主要介绍泛型的应用. 泛型是.NET Framework 2.0 版类库就已经提供的语法,主要用于提高代码的可重用性.类型安全性和效率. 泛型的定义 下面定义了 ...
- InnoDB缓冲池预加载在MySQL 5.7中的正确打开方式
InnoDB缓冲池预加载在MySQL 5.7中的正确打开方式 https://mp.weixin.qq.com/s/HGa_90XvC22anabiBF8AbQ 在这篇文章里,我将讨论在MySQL 5 ...
- Console控制台的正确打开方式
Console控制台的正确打开方式 console对象提供了访问浏览器调试模式的信息到控制台 -- Console对象 |-- assert() 如果第一个参数断言为false,则在控制台输出错误信息 ...
- 任务队列和异步接口的正确打开方式(.NET Core版本)
任务队列和异步接口的正确打开方式 什么是异步接口? Asynchronous Operations Certain types of operations might require processi ...
- (一)Redis for Windows正确打开方式
目录 (一)Redis for Windows正确打开方式 (二)Redis for 阿里云公网连接 (三)Redis for StackExchange.Redis 下载地址 官网.中文网1 及 中 ...
- List的remove()方法的三种正确打开方式
转: java编程:List的remove()方法的三种正确打开方式! 2018年08月12日 16:26:13 Aries9986 阅读数 2728更多 分类专栏: leetcode刷题 版权声 ...
- C++11随机数的正确打开方式
C++11随机数的正确打开方式 在C++11之前,现有的随机数函数都存在一个问题:在利用循环多次获取随机数时,如果程序运行过快或者使用了多线程等方法,srand((unsigned)time(null ...
随机推荐
- DNS原理总结及其解析过程详解
一.域名系统 1.域名系统概述 域名系统DNS(Domain Name System)是因特网使用的命名系统,用来把便于人们使用的机器名字转换成为IP地址.域名系统其实就是名字系统.为什么不叫&quo ...
- linux c函数指针的应用
头文件:1.h #include<stdio.h> int nul_func(); int test1(int a,int b); int test2(int a,int b,int c) ...
- Activiti第三篇【连接、排他网关、指定任务处理人、组任务】
连线 上面我们已将学过了流程变量了,可以在[任务服务.运行时服务.流程开始.完成某个任务时设置流程变量],而我们的连接就是流程变量的实际应用了-. 定义流程图 我们并不是所有的流程都是按一条的路径来走 ...
- Java内存分配之堆、栈和常量池
Java内存分配主要包括以下几个区域: 1. 寄存器:我们在程序中无法控制 2. 栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 3. 堆:存放用new产生的数据 4. 静 ...
- 鸟哥Linux学习笔记04
1, . 当前目录 ..上层目录 2, 目录的相关操作 1)cd(切换目录) [root@node1 ~]# cd [相对路径或绝对路径] [root@node1 ~]# cd : 回到自 ...
- python generator(生成器)
a=(x*2 for x in range(1000)) # print(a.next())#python2使用 print(a.__next__()) #python3使用 print(next(a ...
- hadoop大事件
大事件: Hadoop新一代(2.x)计算平台YARN 一代hadoop存在的问题: 1.Jobtracker单点,容易导致崩溃,节点较多时造成性能瓶颈 2.作业分配基于槽位(slot),分配粒度 ...
- JVM菜鸟进阶高手之路七(tomcat调优以及tomcat7、8性能对比)
转载请注明原创出处,谢谢! 因为每个链路都会对其性能造成影响,应该是全链路的修改压测(ak大神经常说全链路!).本次基本就是局域网,所以并没有怎么优化,其实也应该考虑进去的. Linux系统参数层面的 ...
- 动易CMS - 设为首页代码和加入收藏代码(兼容各种浏览器)
注意: 这里虽然说是兼容,但是有些浏览器的设置就是不支持用js来把页面设为首页,加入收藏夹,只能让用户手动去在浏览器或者按键去设置这些功能,这里说的兼容是指当浏览器有这个设置的时候js会有提示. ...
- HDU-2222文字检索
题目: In the modern time, Search engine came into the life of everybody like Google, Baidu, etc. Wiske ...