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, }