使用 VSCode 编辑器来编译 Sass，自动生成对应的css

1.首先在vscode商店中搜索easysass，然后安装

2.在 VSCode 菜单栏依次点击“文件首选项设置”，打开 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。

 // easy sass插件"easysass.compileAfterSave": true,"easysass.excludeRegex": "","easysass.formats": [{"format": "expanded","extension": ".css"},],"easysass.targetDir": "./css/"

“easysass.targetDir”: “”，这个属性可以设置对应css存在哪个目录。
easysass.compileAfterSave 保存 scss 或 sass 文件后自动进行编译。默认为 true。一般设为 true，可提高工作效率，如果项目中有不直接编译的文件，例如 variable.scss、theme.scss、mixin.scss 等，建议设为 false，避免这类文件编辑保存后被编译为无效 css 需要手动删除的尴尬。

easysass.excludeRegex 提供一个文件名的正则表达式，匹配的文件会被排除，不会被编译成 css。默认为空，即该功能关闭。个人建议将一些不直接编译的文件以下划线开头命名，例如：mixin.scss，然后设置："easysass.excludeRegex": "^+"，即可排除所有以下划线开头的 scss/sass 文件。

easysass.formats 定义输出 css 文件的排版风格和文件名，是一个数组，可以同时编译输出多个不同风格、文件名的 css 文件。每个数组对象中有两个参数：

easysass.formats[i].format 用以编译生成对应风格的 css，参数值如下：

nested：嵌套缩进的 css 代码。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码。

easysass.formats[i].extension 顾名思义就是设置编译输出的文件拓展名了，此处可以自定义文件名，输出的 css 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成。
例如：设置 “easysass.formats[i].extension”: “.min.css”，假设当前的 Sass 文件名为
style.scss，则编译输出的 css 文件名为 style.min.css。

使用 VSCode 编辑器来编译 Sass，自动生成对应的css相关推荐

解决VScode在保存less文件时，自动生成对应的css文件以及安装Easy less之后，计算式子不显示结果的问题
解决VScode在保存less文件时,自动生成对应的css文件以及安装Easy less之后,计算式子不显示结果的问题一.解决VScode在保存less文件时,自动生成对应的css文件的问题下载安 ...
apt编译java_自动生成代码工具--APT
APT(Annotation Processing Tool)注解处理器,是javac的一个工具,它用来在编译时扫描和处理注解(Annotation).它可以生成Java代码,同时这些代码会跟手工白那 ...
编译SandBoxie-plus自动生成文件脚本
首先添加moc.exe所在目录的PATH环境变量 moc.exe .\MiscHelpers\Common\CheckableMessageBox.h -o .\MiscHelpers\Common\ ...
vscode 配置 Latex 编译后自动清理多余文件(.log .out等文件)
setting中配置: "latex-workshop.latex.autoClean.run": "onBuilt", //注意结尾是 t 不是 d" ...
HBuilder配置Less或者Sass自动编译
关于Less\Sass或者其他CSS预处理语言的讲解,这里都没有! 这里主要讲的是HBulider里面怎样开启Less自动编译功能,实现我们编写less的时候,自动生成对应的css而不用每次都手动编译 ...
Silverlight反编译系列二常见代码（自动生成属性CompilerGenerated，代码）
在Silverlight有一些编译后自动生成的代码,最常见的是CompilerGeneratedAttribute和DebuggerNonUserCodeAttribute,下面介绍一下这俩种属性 1 ...
微信小程序开发之编译自动生成新文件的解决办法
文章目录前言微信小程序开发中一自动编译就自动生成一些wxss,wxml,文件的解决办法一. 问题详情二.为什么会出现这个情况三.解决办法 1.找到app.json文件夹下的具体页面详情 2. ...
vscode 编辑器 scss转css如何操作？
目录 1. 安装插件 2. 打开设置找到setting.json,将下面的代码复制粘贴到setting.json文件中保存即可 3. 新建并编辑index.scss文件 1. 安装插件在vscode ...
C2000 MBD 代码自动生成
MBD学习笔记例程所在目录: C:\ProgramData\MATLAB\SupportPackages\R2022b\toolbox\target\supportpackages\tic2000\ ...

使用 VSCode 编辑器来编译 Sass，自动生成对应的css

使用 VSCode 编辑器来编译 Sass，自动生成对应的css相关推荐

最新文章

热门文章