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运行之后的效果:
在这里插入图w片描述
Google浏览器调试中的代码:
在这里插入图片描述
在这里插入图片描述
less格式的文件并没有被导入,css虽然被导入,但是因为没有模块化,所以className={cssStyles.cssModule}这种写法是无效的,所以我们准备配置css、less模块化。

配置css、less模块化

  1. 引入less

$ npm install less-loader less -save-dev

  1. 修改node_modules\react-scripts\config\路径下的webpack.config.dev.jswebpack.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模块化配置成功。

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页