sass的环境搭建和vscode的自动编译

sass的环境安装

1.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. Node-SASS安装

2.1 首先咱们新建个空文件夹，然后用命令行切到该文件夹下

 npm init     (初始化一个项目)

初始化好了后，该空文件夹就会多一个package.json 的文件， 里面记录的内容是我们刚刚自己写的
2.2 在项目文件夹下安装node-sass

cnpm install --save-dev node-sass      （cmd命令行中输入）

说明：–save-dev自动将node-sass加入到项目文件夹下的package.json中

现在我们可以看到文件夹中又多了一个文件夹
在 package.json中的配置下sass

{
  "name": "wifi",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass"  /*添加这句，复制的时候，需要去掉这句话哈，json注释不带这样的*/
  },
  "author": "WiFi_Uncle",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.5.3"
  }
}

保存
vscode 下载easysass
打开 settings.json 全局配置文件

//settings.json
{
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "editor.fontSize": 16,
  "html.format.endWithNewline": true,
  "cssrem.rootFontSize": 100,
 
  "easysass.compileAfterSave": true,
  "easysass.excludeRegex": "",
  "easysass.formats": [
    {
      "format": "expanded",
      "extension": ".css"
    },        
    {
      "format": "compressed",
      "extension": ".min.css"
    }
  ],
  "easysass.targetDir": "./"
}

完成