react中使用less

安装

npm install less less-loader  

config文件

需要先将项目的代码 本地git提交一下

npm run eject

找到 webpack.config.js文件
加入 less文件的 test规则

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

再添加 less 的module，找到sass的复制下来更改，在sass下面添加即可

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

然后重启项目，使用less即可
两种方式
第一种：直接想使用css一样，在项目中引入即可，不过没有css作用域
第二种：在less文件名后加上 .module ,即可有作用域
首先建一个 index.module.less

.test-redux1 {
    border: 1px solid black;
    color: red;
}

引入

import c from './index.module.less'
(
        <div className={c['test-redux1']}>
            <BrotherComponent1 />
            <BrotherComponent2 />
        </div>
);