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

sang之

已于 2023-02-19 00:24:32 修改

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： less react webpack

于 2023-02-19 00:21:22 首次发布

本文链接：https://blog.csdn.net/qq_27568213/article/details/129106344

在看一个 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'
  ),
  sideEf