在 vue-cli v3.0 中使用 SCSS/SASS的方法


Posted in Javascript onJune 14, 2018

在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器),否则无法在项目中直接使用。

方案一:在组件中直接使用

在组件中直接使用 SCSS/SASS 是最简单的方式:

<style lang="scss" scoped>
</style>

通过 lang 选项可以选择使用的语法: scss/sass。如果希望样式能够在全局范围内生效,就将 scoped 删除。

方案二:在组件中导入 .scss 文件

有时候我们可能想定义一个通用的 scss/sass

我们可以在项目目录中创建一个 .scss 文件,比如一些只想在特定组件中使用的通用样式或是一些 scss 变量等。

我们可以在组件中使用 @import 进行样式导入,例如:

@import '../src/static/common.scss';

注意路径不要写错了。而且这种方案的前提是在导入组件中使用了 方案一 。否则的话 .scss 不可能直接在普通 css 样式表中进行编译,需要保持样式表格式的统一。

方案三:使用全局 scss/sass 文件

如果你希望定义一下全局能够使用的 scss 样式,首先需要创建一个 .scss 文件,然后在项目的 main.js 中使用 import 命令就像导入模块一样,将独立 .scss 文件全局导入项目。

import "./static/common.scss";

总结

以上所述是小编给大家介绍的在 vue-cli v3.0 中使用 SCSS/SASS的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
jQuery动画与特效详解
Feb 01 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
vue实现购物车案例
May 30 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
vue cli 3.0 使用全过程解析
Jun 14 #Javascript
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 #Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 #Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 #Javascript
vue中如何让子组件修改父组件数据
Jun 14 #Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
移动端web滚动分页的实现方法
2017/05/05 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python list格式数据excel导出方法
2018/10/31 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python如何删除文件、目录
2020/06/23 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
CNC数控操作工岗位职责
2013/11/19 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
法律讲堂观后感
2015/06/11 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫