React - Sass

sass官网地址：https://www.sass.hk/

前奏：

步骤：

（1）npm install sass

　　   或npm install -g sass（全局安装sass）

　　　或npm install --save-dev sass（项目中安装sass）

　　作用：安装sass

　　安装成功截图：

　　　　

（2）npm install sass-loader node-sass --save-dev

　　作用：安装sass-loader 和 node-sass的依赖。

　　　　node-sass是编译sass到css文件，甚至可以通过中间件的方式自动编译。

　　　　sass-loader是加载和转译 SASS/SCSS 文件

　　理由：执行npm install sass 后直接使用会报错，报错截图：

　　　　

　　　　这是提示你缺乏依赖node-sass。

　　　　安装成功截图：

　　　　　　

 　　（3）sass-loader配置

　　　　找到 webpack.config.dev.js 文件；

　　　　运行npm run eject了，文件在config下；

　　　　未运行，文件在 node_modules/react-scripts/config 下；

　　　　修改rules下的loaders如下所示：

　　　　　　{
            test: /.scss$/,
            loaders: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘],
          }

　　可以开始愉快的使用了。

番外：

　　（1）安装node-sass的坑

　　　　node-sass地址：https://www.npmjs.com/package/node-sass

　　　　1）不同node版本对应不同版本的node-sass，对应如下：　　

NodeJS Minimum node-sass version Node Module Node 12 4.12+ 72 Node 11 4.10+ 67 Node 10 4.9+ 64 Node 8 4.5.3+ 57

　　　　2）安装失败

　　　　　原因一：npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。

　　　　   解决办法：

　　　　　　办法1，全局镜像源安装：npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

　　　　　　办法2，淘宝镜像安装： npm install -g cnpm --registry=https://registry.npm.taobao.org（安装cnpm）

　　　　　　　　　　　　　　　　　cnpm install sass-loader node-sass --save-dev

 

　　　　　原因二：Windows环境下缺乏编译环境Python

　　　　　解决办法：npm install -g node-gyp

　　　　　　　　　　npm install --global --production windows-build-tools （可以自动安装跨平台的编译器：gym）

　　（2）sass-loader地址：https://www.webpackjs.com/loaders/sass-loader/