React环境下css+less module配置方法

使用环境：React 16.0
React 官方脚手架配置React项目后css、less并未模块化设置，刚入门react的小伙伴可能会对这个有些疑问，跟着走一遍流程，将css、less模块化配置。

官方脚手架新建React项目

$ npx create-react-app css-less-module //新建一个名为css-less-module的$ react项目
$ cd css-less-module // 进入项目根目录
$ npm start  // 运行项目

运行官方配置的项目之后显示的是官方demo的内容，为了演示，将App.js文件内的代码替换成如下：

import React, { Component } from 'react';
import cssStyles from './App.css';
import lessStyles from './App.less'

class App extends Component {
  render() {
    return (
      <div style={{textAlign:'center'}}>
        <div className='cssModule'>css模块化配置</div>
        <div className={cssStyles.cssModule}>css模块化配置</div>
        <div className='lessModule'>less模块化配置</div>
        <div className={lessStyles.lessModule}>less模块化配置</div>
      </div>
    );
  }
}

export default App;

App.css代码：

.cssModule {
  font-size: 40px;
  color: blue;
}

App.less代码：

.cssModule {
  font-size: 40px;
  color: red;
}

npm start运行之后的效果：

Google浏览器调试中的代码：


less格式的文件并没有被导入，css虽然被导入，但是因为没有模块化，所以className={cssStyles.cssModule}这种写法是无效的，所以我们准备配置css、less模块化。

配置css、less模块化

1. 引入less

$ npm install less-loader less -save-dev

2. 修改node_modules\react-scripts\config\路径下的webpack.config.dev.js和webpack.config.prod.js文件

在oneOf: []里加入以下代码，大概在prod的383行、dev的309行

{
            test: /\.(css|less)$/,
            exclude: /node_modules\.(css|less)/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                      importLoaders: 1,
                      modules: true,
                    },
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        ident: 'postcss',
                        plugins: () => [
                            require('postcss-flexbugs-fixes'),
                            autoprefixer({
                                browsers: [
                                    '>1%',
                                    'last 4 versions',
                                    'Firefox ESR',
                                    'not ie < 9', // React doesn't support IE8 anyway
                                ],
                                flexbox: 'no-2009',
                            }),
                        ],
                    },
                },
                {
                  loader: require.resolve('less-loader'), // compiles Less to LESS
                  options: {
                    importLoaders: 2,
                    modules: true,   
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
            ],
},

此种改法简单粗暴，其它更精致、更方便的改法可以共同探讨，读懂源码之后可以再其它地方修改，有兴趣的大佬可以试试看。

配置完成

模块化配置完之后的效果如下：

Google浏览器解析后代码：

可以发现类名根据配置的规则进行了变换。
className='cssModule'写法无效，className={cssStyles.cssModule}写法可以正常使用，说明css、less模块化配置成功。