2021.12.05 每天进步一点点：在react里配置less-loader和css ...

react中的less-loader, css-moduels配置. ... react的webpack配置是默认隐藏的，封装在react脚手架包里。

要想加入自己的配置，需要暴露出webpack文件 ... 2021.12.05每天进步一点点：在react里配置less-loader和css-modules 新生代农民工官方认证码农小拽 已于 2022-05-2709:32:45 修改 644 收藏 2 分类专栏： webpack react 文章标签： react.js less css less-loader css-modules 于 2021-12-0523:47:16 首次发布 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/tuzi007a/article/details/121734935 版权 webpack 同时被2个专栏收录 4篇文章 0订阅 订阅专栏 react 31篇文章 0订阅 订阅专栏 less-loader,css-modules配置 配置结果分享准备工作暴露webpack配置版本说明 配置less-loader安装less和less-loader配置方法 案例测试最简单的模块化配置css-loader实现css-modules其他参数配置参考资料补充：支持.less文件模块化 配置结果分享 配置好的文件和测试案例，都已经上传到gitee，仓库地址： https://gitee.com/guozia007/css-modules-lessloader 或查看这份配置好的文件： https://gitee.com/guozia007/imitate-bilibili/blob/master/client/config/webpack.config.js 如以下配置过程有不明确的地方，可以查看该分享内容。

准备工作 默认已经安装了react最新版脚手架 暴露webpack配置 react的webpack配置是默认隐藏的，封装在react脚手架包里。

要想加入自己的配置，需要暴露出webpack文件。

npmruneject 会显示出默认的配置文件： 里面有个webpack.config.js文件，就是我们要写自己的配置的地方。

版本说明 React:^17.0.2 webpack:4.44.2 如果版本不同，可能会出现配置方法不一致的情况。

如果暴露出的webpack文件有两个，分别是webpack.config.dev.js和webpack.config.prod.js，这是老的脚手架版本，你大概需要这么配置css-modules： https://blog.csdn.net/tuzi007a/article/details/121617342?spm=1001.2014.3001.5501 配置less-loader 安装less和less-loader npminstallless--save [email protected] 注： less-loader不选择版本时，默认安装10.x版本。

而该版本不支持lessOptions的方法，会出现报错： ./src/index.less(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oss)TypeError:this.getOptionsisnotafunction 所以安装less-loader时，应选择合适的版本。

本人测试了10.0.0-6.0.0都不支持。

测试了5.0.0版本，是支持的。

配置方法 以下内容均在webpack.config.js文件中操作， 所以以下提到的内容，都去该文件中找到和修改。

1，配置less规则和模块规则 找到如下语句： constcssRegex=/\.css$/; constcssModuleRegex=/\.module\.css$/; 复制后放在这个语句后面， 并把css换成less： 即less语句如下，可直接复制后添加进去： constlessRegex=/\.less$/; constlessModuleRegex=/\.module\.less$/; 2，配置less可选项 找到如下语句： constgetStyleLoaders=(cssOptions,preProcessor)=>{ constloaders=[... 在cssOptions后添加lessOptions 该语句就变成了这样： constgetStyleLoaders=(cssOptions,lessOptions,preProcessor)=>{ constloaders=[... 同时，紧挨着下面找到语句： { loader:require.resolve('css-loader'), options:cssOptions, }, 并把下面这一句，添加到上一句的下面。

{ loader:require.resolve('less-loader'), options:lessOptions, }, 结果如下： 3，配置扩展方法 找到这一段代码： { test:sassRegex, exclude:sassModuleRegex, use:getStyleLoaders( { importLoaders:3, sourceMap:isEnvProduction ?shouldUseSourceMap :isEnvDevelopment, }, 'sass-loader' ), //Don'tconsiderCSSimportsdeadcodeevenifthe //containingpackageclaimstohavenosideeffects. //Removethiswhenwebpackaddsawarningoranerrorforthis. //Seehttps://github.com/webpack/webpack/issues/6571 sideEffects:true, }, //AddssupportforCSSModules,butusingSASS //usingtheextension.module.scssor.module.sass { test:sassModuleRegex, use:getStyleLoaders( { importLoaders:3, sourceMap:isEnvProduction ?shouldUseSourceMap :isEnvDevelopment, modules:{ getLocalIdent:getCSSModuleLocalIdent, }, }, 'sass-loader' ), }, 复制上面代码，把sass改成less，然后把修改好的代码添加到该代码下面， 修改后的代码如下： { test:lessRegex, exclude:lessModuleRegex, use:getStyleLoaders( { importLoaders:3, sourceMap:isEnvProduction ?shouldUseSourceMap :isEnvDevelopment, }, 'less-loader' ), sideEffects:true, }, { test:lessModuleRegex, use:getStyleLoaders( { importLoaders:3, sourceMap:isEnvProduction ?shouldUseSourceMap :isEnvDevelopment, modules:{ getLocalIdent:getCSSModuleLocalIdent, }, }, 'less-loader' ), }, 到此，less,less-loader配置完成。

配置完成后，需要重启项目。

案例测试 写个带有less语法的例子，测验一下，less配置是否可以用。

/src/index.js importReactfrom'react'; importReactDOMfrom'react-dom'; import'./index.less'; functionApp(){ return(

) } ReactDOM.render( , document.querySelector('#root') ) /src/index.less @def:pink; .color1{ color:@def; } 重启项目，npmstart 页面内字体颜色显示粉红色，则说明配置正常。

最简单的模块化 最简单的方法，就是啥配置项都不改动的方法。

这是脚手架2.0版默认支持的，不需要任何配置，所以也不需要暴露webpack文件。

只需要改动css/less文件的文件名，即可实现样式的模块化。

原因是，react的默认配置里，已经打开了模块化设置，只不过是对文件名有要求，需要把文件名写作xx.module.css或者xx.module.less的形式。

写个案例测试一下，还用上面写过的例子。

然后我们做如下改动： 1，改样式文件名：index.less-->index.module.less2，改动引入方式：import'./index.module.less';-->importstylesfrom'./index.module.less';3，改动标签内类名写法：helloreact!-->helloreact! 此时，重启项目。

npmstart 可以查看到，页面的字体依然为粉红色。

而且，重点是： 打开控制台，可以看到，这里的类名变了。

变成了一种文件名_类名__hash值（截取前5位）的格式。

也就是说，这时，已经实现了样式的模块化。

但是，为了习惯上的样式文件名，怎么做既能不改动样式文件名，又能实现样式模块化呢？这时，我们就想到了上面的auto选项的值。

配置css-loader实现css-modules css-modules不是单独的库，也不是插件，而是css-loader中的一个可选项，激活该可选项，即可实现样式的模块化，且无需改动原有的文件名。

既然需要自己配置，我们就需要自己打开该功能。

找到这几项代码，csslesssass分别有一项，应该是一共有3项这种代码： test:--ssRegex, exclude:--ssModuleRegex, use:getStyleLoaders({ importLoaders:--, sourceMap:isEnvProduction ?shouldUseSourceMap :isEnvDevelopment, }), 把这里都做如下修改： test:--ssRegex, exclude:--ssModuleRegex, use:getStyleLoaders({ importLoaders:--, modules:true,//都加上这一句代码 sourceMap:isEnvProduction ?shouldUseSourceMap :isEnvDevelopment, }), modules:true,意思是打开css-modules功能。

不需要把文件命名为.modules.xx的形式了。

当然，为了类名更符合规则，我们还需要做其他更改，把上面的代码改成如下形式： test:cssRegex, exclude:cssModuleRegex, use:getStyleLoaders({ importLoaders:1, modules:{ mode:"local", localIdentName:"[path][name]__[local]--[hash:base64:5]", }, sourceMap:isEnvProduction ?shouldUseSourceMap :isEnvDevelopment, }), localIdentName这里表示编译后的类名规则。

path:文件路径 name:文件名 local:类名 hash:base64:5表示取base64字符串的前五位 写个案例测试一下吧： 我们仍然用上述案例， 只不过这次把文件名中的module去掉， index.module.less-->index.less 修改后，重启项目： 可以看到，页面字体颜色呈现粉红色。

打开控制台，还可以看到新的类名： 至此，我们的css-modules配置，也已经完成。

其他参数配置 以上配置满足了基本的css-modules使用。

如果需要其他配置，可以参考官方资料的案例： module.exports={ module:{ rules:[ { test:/\.css$/i, loader:"css-loader", options:{ modules:{ mode:"local", auto:true, exportGlobals:true, localIdentName:"[path][name]__[local]--[hash:base64:5]", localIdentContext:path.resolve(__dirname,"src"), localIdentHashSalt:"my-custom-hash", namedExport:true, exportLocalsConvention:"camelCase", exportOnlyLocals:false, }, }, }, ], }, }; 这里面列举出了很多可配置项。

都在加在上面modules对象里的。

参考资料 老版本webpack配置文档https://github.com/css-modules/webpack-democss-loader官方说明https://github.com/webpack-contrib/css-loader官方less-loader文档https://webpack.docschina.org/loaders/less-loader/ 补充：支持.less文件模块化 https://blog.csdn.net/tuzi007a/article/details/124997388 新生代农民工官方认证码农小拽 关注 关注 2 点赞 踩 2 评论 2 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 react中安装及配置less（转载） TwoBE9876的博客 09-07 270 react项目中使用less 1.暴露webpack配置项，安装依赖 react项目创建的时候是看不到webpack相关的配置文件的，所以需要先暴露出来，使用下面的命令： npmruneject 然后安装less相关的依赖： yarnaddlessless-loader-D 2.修改webpack.config.js 进入config目录下的webpack.config.js文件中，添加下面两行 constcssRegex=/\.css$/; constcs 评论 2 您还未登录，请先 登录 后发表或查看评论 ERRORin./src/index.less(../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/c zm_miner的博客 02-02 6626 当我把所有资源都放在src下面的时候,执行npxwebpack-dev-server打包成功,当划分js,css,imgs文件夹以后,报错 ERRORin./src/index.less(../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./src/index.less) Modulebuildfailed(from../node_modules/less-loader. webpack4.x+babel7.x配置 weixin_44705701的博客 07-10 375 安装babel相关库 babel-loader @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/runtime npminstallbabel-loader@babel/core@babel/plugin-pro... cssmodule支持less,react配置less,并使用lessmodule（webpack.config.js配置） weixin_39707693的博客 08-03 335 网上看了很多配置，最后才发现create-react-app2.0后就不用eject就可以使用cssmodule特性，那么less仿照css的配置即可1.cssmodule的使用将CSS文件名为[filename].module.cssimportstylesfrom'./index.module.css';2.配置less暴露webpack配置文件cnpmruneject安装les... React项目中使用CSSModule weixin_44519496的博客 08-25 176 安装react-app-rewired 由于新的[email protected]版本的关系，还需要安装customize-cra。

但是我们这里不需要安装[email protected]。

只需要安装[email protected]这个版本就可以了。

[email protected]//这个版本比较稳定 修改package.json /*package.json*/ “script create-react-app中使用less和antd并修改主题颜色 luck_lin 10-21 9789 引入less 如果项目根目录中没有config文件夹，首先暴露出项目配置文件，项目下执行： npmruneject 如果项目是从git仓库中pull下来的的话，必须确保本地项目与仓库中没有冲突，才能够eject成功，否则命令会报错，因为该操作是不可逆的，一旦暴露出配置文件后eject功能将被删除。

eject成功后项目下会多出两个文件夹，config和scripts，我们开发中一般只... react引入less2018/12/21 weixin_40046130的博客 12-21 715 最新的react包引入less npminstalllessless-loader--save npmruneject暴露出webpack找到build中webpack.config.dev.js 新版本貌似引入sass 所以我们把关于sass替换成less就ok 将sass替换成less将sass-loader替换成less-loader嫌麻烦的直接复制下面代码... React中配置CSSmodules m0_59212993的博客 01-20 556 使用CreateReactAPP创建项目 npxcreate-react-appmy-app cdmy-app npmstart 将React打包的配置文件释放出来 npmruneject 执行完上面的命令之后，会新增两个目录script/和config/。

在config/目录下可以看到两个配置文件webpack.config.js和webpackDevServer.config.js。

如果你需要配置所需的功能，可以在webpack.config.js中添加配置。

如果你需要将项目打包 【React】使用脚手架搭建的项目使用less文件 qing_小诺的博客 08-11 538 使用create-react-app脚手架工具搭建的项目中，使用less文件运行不会报错，但是样式会无效。

原因：create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式，其构建的项目默认是不支持less的，需要我们手动集成。

解决： step1：安装less和less-loader插件包：【npminstalllessless-loader--save-dev】 step2：新建项目一般默认不显示config目录的，需要执行：【npm. Vite+Vue3怎么安装和配置less-loader herbsama的博客 04-10 1638 1、首先安装less和less-loader npmiless-D npmiless-loader-D 2、vite.config.js配置 添加css配置 exportdefaultdefineConfig({ plugins:[vue()], css:{ //css预处理器 preprocessorOptions:{ less:{ charset:false, additionalData:'@im 配置react的css模组 白小起 04-20 23 react17系统精讲笔记 【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程 ZQmxy的博客 03-18 957 【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程 react项目配置react-hot-loader实现模块热更新 追风Programer的博客 03-26 5758 今天我们来聊一聊react的模块热更新，熟悉react的同学都知道，使用官方的脚手架，当我们改动页面时，整个页面会被刷新，那我们当然希望页面只刷新我们改动的部分而不是刷新整个页面，那么怎么做到如此呢？千呼万唤始出来，react-hot-loader就是来完成这个伟大的使命的。

1.安装react-hot-loader npmireact-hot-loader--save 2.在开... 【React】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd 最新发布 weixin_42582523的博客 05-04 137 【React+TS】从零开始搭建react+router+redux+less+sass+axios反向代理+antd，如有问题，请及时留言，看到后会及时解答的 react配置less-loader，两种配置方案 【03】的博客 08-19 1427 1、暴露配置文件 请查阅相关文章 https://web03.cn/blog/152 下载loader npminstalllessless-loader 配置方案1（推荐） 打开配置文件webpack.config.js //constcssRegex=/\.css$/;//修改前 constcssRegex=/\.css|less$/;//修改后 新增代码 { loader:require.resolve('less-loader') }, 修改代码 //excl react项目配置react-hot-loader qq_41899420的博客 11-10 716 前言     本人想在react项目中配置react-hot-loader，在网上借鉴了众多网友的经验，却始终找不到门路。

最终，有幸在Github上找到了一个能成功运行的react搭配react-hot-loader项目。

参考这一项目，我成功配置了react-hot-loader。

注：仅在此分享能成功配置react-hot-loader的一种方法，不涉及原理分析及扩展方案。

一、react-hot-loader是什么？    &nbs create-react-app+TS+antd+less配置——less-loader6.0之后的配置【转载】 qq_60178319的博客 04-04 101 一、创建项目a.全局安装create-react-app npminstallcreate-react-app-g b.创建自己的项目 npxcreate-react-appmy-projectName b1.创建支持TypeScript的react项目 npxcreate-react-appmy-projectName--templatetypescript c.暴露项目的... 手把手教你webpack3（7）style-loader详细使用说明 qq20004604的博客 12-05 3279 STYLE-LOADER详细使用说明前注：文档全文请查看根目录的文档说明。

如果可以，请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里，发【Issues】。

DEMO地址1、概述简单来说，style-loader是将css-loader打包好的css代码以