在 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 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
js实现星星打分效果
Jul 05 Javascript
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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
JSONP原理及应用实例详解
2018/09/13 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python处理“
2019/06/10 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python urllib.request对象案例解析
2020/05/11 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
收银员岗位职责
2014/02/07 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python