react 引用less模块 webpack配置提取与修改

用法 ：

import styles from ‘./App.less’

一、 首先提取webpack 配置

create-react-app创建的react项目，webapck配置，默认情况下是在node_modules里面的，我们需要把它暴露到根目录上来。
执行 npm run eject 命令即可，一般情况下，是会报错的。
解决方法，依次执行下面几个命令就可以了。
git init
git add . 注意后面这里有个点
git commit -m ‘init’
这时，重新执行一下 npm run eject即可。

二、修改 config>>webpack.config.js

const lessModuleRegex = /.module.less$/;

三、

     exclude: lessModuleRegex,
  {

              test: lessModuleRegex,

              include: paths.appSrc,

              loader: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: shouldUseSourceMap,

                  modules: {

                    getLocalIdent: getCSSModuleLocalIdent

                  }

                },

                'less-loader',

                {

                  javascriptEnabled: true

                }

              )

            },

如果配置已经提取出来 开发中途需要引入less

#  npm install less less-loader --save-dev

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

#复制这一段 将 scss 修改为less

 		{
              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'
              ),
          },