安装scss、stylus、pug

前提环境：win10、npm@6.9.0、VS code

安装sass

npm install -s sass

检查是否安装成功

 sass --version 

在VScode里安装easy sass

搜索商店，查找easy sass安装，完成后重启vscode即可

然后不需要设置任何内容，编写.scss文件后，自动保存即可生成以下的文件，甚至包括压缩的文件，非常nice!

安装Stylus

npm install -g stylus

stylus --version

• 自动编译

  需要记住两个命令

  1. -w 是自动监视文件
  2. -o 是将编译后的CSS文件输出到指定文件中

  例如我想要自动编译css/style.styl文件，只需要在命令行输入
  $ stylus -w css/style.styl -o css/
  此时修改css/style.styl文件就会得到编译后的 css/style.css文件
  书写代码时只需要在css/style.styl文件中书写即可

  
  
  
• VSCode 扩展商店中搜索 stylus Supremacy 进行安装
• 之后在用户设置 setting.json 配置文件中添加如下配置即可

•     // 以下为stylus配置
   "stylusSupremacy.insertColons": false, // 是否插入冒号
   "stylusSupremacy.insertSemicolons": false, // 是否插入分好
   "stylusSupremacy.insertBraces": false, // 是否插入大括号
   "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
   "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行

安装 Pug

npm install -g pug

npm install -g pug-cli

有两种命令分别是

 pug index.pug 

这个命令编译出来的是压缩版的代码，即没有空格，换行的代码显示

 pug -P -w index.pug 

这个命令编译出来的代码不是压缩版更具可读性，并且可以实时编译，实时编译就是当我们修改index.pug时，index.html也会被改变