vue组件中使用 scss

可以参考我github项目详细地址

0. 创建项目

  // 创建vue项目
  vue init webpack vue-skills
  // 在.vue文件中使用 scss 后报错
  // 安装 yarn add node-sass -D 和 yarn add sass-loader -D
  // 安装后的 node-sass 和 sass-loader版本
  "node-sass": "^5.0.0",
  "sass-loader": "^11.0.1"
  // 此时使用scss报错，将版本降低后重新 npm install 后ok，可以正常使用
  "node-sass": "^4.14.1",
  "sass-loader": "^7.1.0",
  // sass-loader版本过高引起的问题。sass-loader7版本适配node-sass4版本，否则报错

1. 项目安装需要 node-sass 和 sass-loader

   安装 yarn add node-sass -D 和 yarn add sass-loader -D

2. 出现的问题：

   1. node用12.13.1 / 12.13.0 安装不成功，用10.16.0 ok了
   2. 运行后报错

      报错内容：
          Module build failed: TypeError: this.getResolve is not a function
      解决方法：
          sass-loader版本太高造成的。
          将安装的版本 ^8.0.2 => ^7.1.0 重新npm install 或 yarn 一下就可以了
      

   3. 因为是在12.x.x版本安装的node-sass,切到10.x.x版本报错一下内容

      Found bindings for the following environments:
        - Windows 64-bit with Node.js 10.x
      
      This usually happens because your environment has changed since running `npm install`.
      Run `npm rebuild node-sass` to download the binding for your current environment.
      

      解决方法： 报这个，重新 npm rebuild node-sass 就可以了

3. 之后就可以正常在vue组件中使用scss了

   <style  lang="scss">
       .hello { color: pink;
         span { color: red; margin-left: 20px;}
       }
   </style>