Vue-cli 脚手架安装sass

• Vue Cli安装和node-sass、less-loader、sass-loader安装

  一、Vue Cli安装

  CLI全程是Command-Line Interface，命令行界面，俗称脚手架，可以帮我们快速的创建vue项

  Vue Cli的使用必须依赖node环境和webpack

  管理员方式打开cmd进行安装，安装命令：

  npm i -g @vue/cli

  查看版本

  C:Windowssystem32>vue -V
  @vue/cli 4.5.13

  二、node-sass安装

  vue项目如果没有采用vue-cli方式创建，那么在项目下载之后，需要安装node-sass，不然会报错。安装后再进行编译

  npm install node-sass --registry=https://registry.npm.taobao.org
  npm i

  如果node-sass版本不对，可以使用如下命令：

  npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist 
  --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

  卸载node-sass命令

  cnpm uninstall node-sass -g

  安装指定版本的node-sass

  npm i -D node-sass@4.12.0 

  node-sass 与node版本对应

  

  三、清除缓存

  npm cache clean -f

  四、less和less-loader安装

  默认vue-cli创建的项目并没有安装less-loader，如果你想要使用less语法，必须先配置好less相关的loader。

  安装less-loader，还要安装less，因为less-loader是依赖于less的。

  npm install less less-loader --save-dev

   如果报错：Syntax Error: TypeError: this.getOptions is not a function，因为less-loader安装的版本过高

  卸载less-loader

  npm uninstall less-loader

  安装less-loader

  npm install less-loader@6.0.0

  五、安装js-cookie

  npm命令

  npm install --save js-cookie

  六、安装sass-loader

  npm命令

  npm install --save-dev sass-loader  

   卸载sass-loader

  npm uninstall --save sass-loader

   指定版本

  npm install sass-loader@7.3.1 --save-dev