React 1.8踩坑，模块化引入less样式不生效

在看一个 react 项目的时候，项目中是直接引入 import style from './style.less' 

create-react-app 创建项目之后， react 脚手架里面是已经集成了css，sass的，先安装less，less-loader

npm install less less-loader

react 默认隐藏 webpack 配置文件。有个方法是 npm run eject 将 webpack 配置暴露出来，但操作不可逆，个人想尽量简单，所以直接改了 node_modules/react-scripts/config/webpack.config.js，这里用 npm run eject 将 webpack 配置暴露出来也是一样的配置。参考 sass 的配置在sassModuleRegex 下添加

const lessRegex = /\.less$/;
const lessModuleRegex = /\.less$/;

下面这部分需要在"file" loader makes sure those assets get 上添加，也是参考sassRegex和sassModuleRegex

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3, // 用于决定css文件中读取到@import时被外层数组中哪个处理
      sourceMap:  isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
      modules: {
        mode: 'icss',
      },
    },
    'less-loader'
  ),
  sideEffects: true, // 允许通过配置，标识代码是否有副作用
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap:  isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
      modules: {
        mode: 'local',
        getLocalIdent: getCSSModuleLocalIdent,
      }
    },
    'less-loader'
  ),
},

导入

import style from './style.less'

使用

结束。

这部分查了很多解决方式，react 引入 less，基本上都是const lessModuleRegex = /\.module\.less$/; 这样我写的普通样式 body {} 什么的都可以用，但是引入 style.app 就是undefind。困扰很久之后搜到了解决文。本来很久没用到CSDN，想到可能有人会和我一样就纪录一下。

lessModuleRegex 负责 less 模块化，/\.module\.less$/ 需要文件名 xx.module.less 的形式引入才能使用 {style.xx} 这种用法

(110条消息) react18中配置webpack，支持less以及less模块化(补充篇)_新生代农民工官方认证码农小拽的博客-CSDN博客_less模块化