网上看了很多配置，最后才发现 create-react-app2.0 后就不用 eject 就可以使用 css module 特性，那么 less 仿照 css 的配置即可

1.css module 的使用

将 CSS 文件名为 [filename].module.css

import styles from ‘./index.module.css’;

2. 配置 less

1. 暴露 webpack 配置文件

   cnpm run eject

2. 安装 lessless-loader 依赖

   npm install less less-loader --save-dev

3. 修改 webpack.config.js 文件配置，一共修改三处

 第一处：增加定义变量

```
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
```

第二处：仿照 css 配置 less
```
{
                            test: cssRegex,
                            exclude: cssModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                            }),
                            // 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,
                        },
                        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
                        // using the extension .module.css
                        {
                            test: cssModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                                modules: true,
                                getLocalIdent: getCSSModuleLocalIdent,
                            }),
                        },

                        // Opt-in support for SASS (using .scss or .sass extensions).
                        // By default we support SASS Modules with the
                        // extensions .module.scss or .module.sass



                        {
                            test: lessRegex,
                            exclude: lessModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                            }),
                            // 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,
                        },
                        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
                        // using the extension .module.css
                        {
                            test: lessModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                                modules: true,
                                getLocalIdent: getCSSModuleLocalIdent,
                            }),
                        },
```
第三处：修改 getCSSModuleLocalIdent 函数内部，增加 less

![图片描述][2]

3 测试是否安装成功

1. 建立以 module.less 为结尾的 less 文件

2. 通过 module 引入 less 到 index

   import styles from './my.module.less'
   
       render() {console.log(styles.text)
           return (
               <div>
                   <div className={styles.text}>Hello World</div>
               </div>
           )
       }