写在前面

使用umi框架久了，全家桶用的很舒服，也习惯了less。今天突然兴趣来了，使用create-react-app新建个项目写点demo，css的写法真的是难受，就想自己配置下，没想到还折腾了好一会才行，记录一下，有遇到相同情况的朋友可以作为参考。

配置环境

• create-react-app 3.4.1

准备工作

我是很久没有直接使用webpack了，所以就使用 run eject 命令，放出了默认的webpack配置项：

npm run eject

这一版的create-react-app将配置文件统一到一个config文件夹了，也挺好，里面就躺着我们要找的文件。

接下来安装 less 和 less-loader:

npm i less less-loader --save-dev

开始配置

• 首先在webpack.config.js文件中申明less和lessModule的文件名正则匹配，可以看到create-react-app现在已经默认支持sass的写法，仿着写就好了。

...
// style files regexes
const cssRegex = /\\.css$/;
const cssModuleRegex = /\\.module\\.css$/;
const sassRegex = /\\.(scss|sass)$/;
const sassModuleRegex = /\\.module\\.(scss|sass)$/;
// 添加下面两行
const lessRegex = /\\.(less)$/;
const lessModuleRegex = /\\.module\\.less$/;

...

• 接着配置loader，同样我们找到sass相关的写法，在后面添加：

getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          // getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[local]_[hash:base64:5]'
        },
      },
      '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,
  },
  // Adds support for CSS Modules, but using LESS
  // using the extension .module.less or .module.less
  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          // getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[local]_[hash:base64:5]'
        },
      },
      'less-loader'
    ),
  },
...

模块化配置

添加modules:true配置模块化，当然上述代码已经包含，这里不多赘言：

其中比较重要的是，在 .less 为文件后缀的配置写法里添加 modules配置，网上有些写法里只配置.module.less的模块化写法，还有一点就是localIdentName的配置项问题：

• modules:true 打开该开发者工具面板后发现 class 只显示了hash值，不利于查找；
• modules:{getLocalIdent: getCSSModuleLocalIdent} 也就是当前版本默认的写法， class 显示为 [parent][local][hash] 太冗余；
• modules:{localIdentName: '[local]_[hash:base64:5]'} 写法比较简洁；

模块化用法

然后就可以使用import styles from ...和 styles.xxx的写法了，熟悉的感觉又回来了。

import styles from './App.less';

function App() {
  return (
    <div className={styles.App}>
      what
    </div>
  );
}
export default App;