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