vscode中使用Sass,并自动编译为CSS文件

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,

    
    
}

 

 

 

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页