React配置less和scss

这种基本上就是安装个less/scss和对应的loader，然后去webpack里配置一下。

create-react-app脚手架生成的项目默认隐藏掉了webpack配置，所以配置less/scss之前先把配置文件暴露出来：
npm run eject

一.less
1.首先是下载less和less loader：
yarn add less less-loader

2.修改config/webpack.config.js
添加下面两行：

const lessRegex= /\.less$/;
const lessModuleRegex=/\.module\.less$/;

然后添加lessRegex和lessModuleRegex：

{
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
//下面为新添加的，上面代码只是帮助你找到添加代码的位置@_@
{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                  },
                  'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                  },
                  'less-loader'
              ),
            },

至此less配置完成。
二.scss
1.首先还是安装：
yarn add node-sass@4.14.1 sass-loader
这里有同学要问了，为什么要装4.14.1呀？
嗯，这里如果yarn add node-sass的话给你装的是最新的版本，我这个时间点的话是5，
（可以用yarn info node-sass或者npm view node-sass version查看包最新版本（推荐后者））
5的话会报错，Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
解决：
先卸载已安装版本:npm uninstall node-sass或者yarn remove node-sass，
再重新安装node-sass
（有时卸载完会报错，重启下编辑器试试）

2.配置webpack
用create-react-app生成的项目webpack里面已经配好了sass和scss（我也是在配置less的时候发现的，有配置但没给你安装node-sass和loader，你说奇不奇怪），所以不需要配置了。

至此scss配置完毕。

参考：
react中安装及配置less
react中如何配置并使用scss