如何在 vue-cli v3.0 中使用 SCSS/SASS

在项目中使用 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";

写在最后,写博客不易,如果这篇博客对你有用,请留下你的赞吧。你的赞赏是我最大的动力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用IntelliJ IDEA进行热部署

最近&#xff0c;在PrimeFaces论坛PrimeFaces IDE Poll中进行了投票&#xff0c;以投票赞成用于开发PrimeFaces应用程序的最佳IDE。 最多人投票支持NetBeans。 NetBeans和Eclipse是免费的IDE。 我最喜欢的IDE IntelliJ IDEA Ultimate不是免费的&#xff0c;我认为这就是为什么在…

创梦天地关嵩:借力腾讯云,打造文娱新生态——云+未来峰会回顾

欢迎大家前往腾讯云社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 今年腾讯云未来峰会主题的关键词是“焕启”&#xff0c;这是包含无限希望的两个字&#xff0c;让人倍感振奋。“焕启”是什么意思&#xff1f;在我的理解中&#xff0c;“焕启”本身就是激活&#xff0c;激…

领域模型学习笔记

别在领域模型迷失了自己转载于:https://www.cnblogs.com/mySerilBlog/p/9914375.html

【缓存清理工具】缓存清理软件_电脑缓存清理软件

产品介绍 有很多种比如来自网页和windows等,缓存如果不经常清理会使你的机器运行速度变慢&#xff0c;缓存清理工具可以帮你最多程度的清理垃圾文件而且速度也很快&#xff0c;有了它的帮助让你爱机清理彻底&#xff0c;运行更加顺畅&#xff01;主要能清理&#xff1a;所有应…

c语言转义字符空格符号,C语言 转义符\t占用几个空格

这个问题&#xff0c;在你学习编程过程中可能会考虑到&#xff0c;有时为了字节对齐而使用转义符中\t,但是到底\t占用几个空格呢&#xff1f;下面我们首先通过程序来体验下&#xff0c;然后在总结#include int main(){printf("123456\t123\t45\n");printf("12\t…

检测Maven依赖中介

从Maven 2.0.9开始&#xff0c;向Maven添加了一个新功能&#xff0c;称为依赖中介。 依赖关系中介是Maven在特定情况下在依赖关系树中多次出现依赖关系时用来解决项目依赖关系的技术。 通常&#xff0c;这发生在通过项目的依赖关系链接的传递依赖关系上。 在这种情况下&#xf…

简单的节流函数throttle

在实际项目中&#xff0c;总会遇到一些函数频繁调用的情况&#xff0c;比如window.resize&#xff0c;mouseover&#xff0c;上传进度类似的触发频率比较高的函数&#xff0c;造成很大的性能损耗&#xff0c;这里可以使用节流函数来进行性能优化&#xff0c;主要是限制函数被频…

[探索] 利用promise做一个请求锁

在最近开发小程序的过程中&#xff0c;遇到一个需求&#xff0c;就是请求的时候header需要带上accessToken, accessToken是通过登陆接口返回的参数&#xff0c;可能会出现过期的情况&#xff0c;则需要重新登陆&#xff0c;所以每次加载小程序都会进行一次本地储存的accessToke…

c语言网上找程序组合,C语言程序我同学说在网上下的一章一章的小说组合成一个太麻烦,于是 爱问知识人...

我同学说在网上下的一章一章的小说组合成一个太麻烦&#xff0c;于是我突发奇想要做一个把记事本中的内容按顺序连接起来的程序&#xff0c;但是运行不了&#xff0c;我怀疑是读写时候指针搞错了&#xff0c;情大侠们帮我看看&#xff0c;小弟感激不尽&#xff01;#include#inc…

用于J2EE开发的Cloud IDE

随着许多传统软件工具进入云计算&#xff0c;我想看看它们与传统工具的比较。 我的兴趣是Java EE技术&#xff0c;并开始寻找一种云服务&#xff0c;该服务使我能够开发&#xff0c;测试和部署Java EE应用程序。 我很快发现&#xff0c;许多云IDE是为Web前端技术&#xff08;例…

【Python】[02]初识Python

Python3的下载安装 根据书上的推荐&#xff0c;我将学习和使用Python3版本&#xff0c;从www.python.org网站&#xff0c;根据对应的操作系统&#xff0c;下载合适的Python版本即可 我的是64位系统&#xff0c;所以我选择的是Windows x86-64 executable installer 下载完成后双…

自己写了一个多行文本溢出文字补全的小库, 说不定你会用得到的

有些时候产品会有这么个需求&#xff0c;希望给文章或者帖子给一个摘要&#xff0c;最多3行&#xff0c;或者其它行数&#xff0c;超出3行会补上...。当然这种很简单&#xff0c;用css可以搞定。但是遇上要求多点的产品&#xff0c;希望补上的是...查看全文&#xff0c;这样的话…

C语言简单程序情话,给你一份程序员的“科技情话”,赶在双十一前脱单吧

说起程序员很多人第一印象都是呆板木讷但你们不知道程序员的浪漫花样给你一份程序员的“科技情话”赶在双十一前&#xff0c;和你暗恋的人表白吧~程序员的情书Void missing_you()For(timemeet_you;;time)Missing_you()自从遇见你&#xff0c;就没有一刻不想你-----------------…

记录好用的软件

【摘要】 平时用的很舒服的软件&#xff0c;做个记录&#xff0c;一直更新。 【Snipaste截图】 一般都会用QQ的截图工具&#xff0c;但是现在很少登QQ&#xff0c;Snipaste截图也很好用&#xff0c;只需要按F1即可截图。 【ScreenToGif】 ScreenToGif可以录制屏幕生成Gif文件。…

辗转相除法求最大公约数(c++)

#include <iostream> using namespace std;int main() {int m, n, r;cin >> m >> n;r m % n;while( r ){m n;n r;r m % n;}cout << n << endl;return 0; }转载于:https://www.cnblogs.com/yuzilan/p/10626177.html

x86上的Java最终字段没有操作?

我一直很乐于深入研究多线程编程的细节&#xff0c;尽管阅读了多年的CPU内存一致性模型&#xff0c;无等待和无锁算法&#xff0c;Java内存模型&#xff0c;实践中的Java并发性等知识&#xff0c;但我始终很喜欢。等等-我仍然会创建多线程编程错误。 总是令人惊奇的谦卑经历&am…

阿里90后工程师,如何用AI程序写出双11打call歌?

来自阿里巴巴的90后工程师芦阳&#xff0c;用业余时间开发了一套人工智能作词程序——名字叫做MusicGo&#xff0c;这个程序经过芦阳的“喂养”和设定&#xff0c;可以自己写饶舌歌曲。芦阳加入菜鸟也才仅仅四个月&#xff0c;这是他第一次参加双11备战。作为一名新员工&#x…

c语言常用英语单词大全下载,C语言实现英文单词助手

英文单词小助手的实现步骤&#xff0c;供大家参考&#xff0c;具体内容如下题目需求分析&#xff1a;英文单词小助手是帮助学生背诵单词的软件&#xff0c;用户可以选择背诵的词库&#xff0c;并可以编辑自己的词库&#xff0c;还应有词语预览学习功能。系统可以给出中文&#…

通过Jedis API使用排序集

在上一篇文章中&#xff0c;我们开始研究Jedis API和Java Redis Client。 在本文中&#xff0c;我们将研究Sorted Set&#xff08;zsets&#xff09;。 排序集的工作方式类似于集&#xff0c;因为它不允许重复的值。 最大的区别在于&#xff0c;在“排序集”中&#xff0c;每个…

编程历史

编程历史&#xff1a; 编程语言的历史早于真正意义的计算机的出现。19世纪就有"可编程的"织布机和钢琴弹奏装置出现&#xff0c;它们都是领域特定语言(DSL)的样例。 从1951年2014年&#xff0c;人类一共发明了256种编程语言&#xff0c;每一种语言的出现都带有某些新…