1.执行命令

npm install

2.全局安装Sass

 npm i sass -g

3.查看sass版本

sass -v

4.将文件自动编译为css文件
sass --watch ./sass:./css
5.将这行命令写到package.json文件里

6.然后执行:

npm run goSass

 

如果发现上述方法不能成功,还可以使用如下方法。

1.在vscode的应用商店找到easy sass并安装

2.安装完成后,选择文件 ——首选项——设置

3.按照下图点击进入setting.json配置文件。

 

4.将如下代码复制到该文件中
{ /** Easy Sass 插件 **/ "easysass.formats": [ { "format": "compressed", // 压缩
"extension": ".css" } ], "easysass.targetDir": "./css/" // 自定义css输出文件路径 }

5.这时候scss就可以自动编译成css了。

注意:上述配置只针对当前的工作区有效。不是针对全局进行配置的。如果需要全局配置,在第三步设置的时候选择用户设置,然后将代码复制到用户设置的文件中。

附录:

vscode全局配置
{ "editor.fontSize": 18, "files.autoSave": "onFocusChange",//失去焦点自动保存
"workbench.startupEditor": "welcomePage", "editor.quickSuggestions": {
"strings": true }, // vue设置 "emmet.syntaxProfiles": { "vue-html": "html",
"vue": "html" }, "files.associations": { "*.vue": "vue" }, // vetur设置
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript", // format设置
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"editor.formatOnSave": true, }
 

 

 

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信