React16.8脚手架配置less

官方脚手架配置less

1.React默认是支持sass，但是不支持less,想使用less需要进行魔改

---

首先在项目根目录下载 less，less-loader 使用yarn安装 因为在国内速度比较快 但yarn不能包安装到全局

yarn add less less-loader

.
2.把webpack相关文件暴露出来进行修改

yarn run eject

找到config目录下的一个 webpack.config.js 文件 这个文件是webpack的配置文件。里面会有很多webpack默认的依赖项，但不需理会

在配置文件中 使用编辑器搜索 sass 关键字 快速定位，这里我使用的是VScode， 找到以 const 声明的 sass 模块。复制一份粘贴到下方，把sass改为less

再找到 以test:sass 为开头的编译文件 复制一份，找个合适的位置粘贴，把sass改成less即可

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),

              sideEffects: true,
            },

            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

完成后就可以开心的使用 less 来写样式