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

　　

此種改法簡單粗暴，其它更精致、更方便的改法可以共同探討，讀懂源碼之后可以再其它地方修改，有興趣的大佬可以試試看

 

配置完成

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