在 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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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
PHP错误提示的关闭方法详解
2013/06/23 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
激活 ActiveX 控件
2006/10/09 Javascript
动态表格Table类的实现
2009/08/26 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
婚前保证书
2014/04/29 职场文书
设备管理实施方案
2014/05/31 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2015年教师新年寄语
2014/12/08 职场文书
青春雷锋观后感
2015/06/10 职场文书
担保书格式范文
2015/09/22 职场文书
python实现批量移动文件
2021/04/05 Python
使用Pytorch训练two-head网络的操作
2021/05/28 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android