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;
}

　　

 

 

 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,
                  },
                },
            ],
},

　　

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

 

配置完成

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