react脚手架工程中使用less及CSS Modules

最新推荐文章于 2023-05-24 19:21:09 发布

张小浪

最新推荐文章于 2023-05-24 19:21:09 发布

阅读量365

点赞数 1

分类专栏：学习笔记文章标签： reactjs

本文链接：https://blog.csdn.net/qq_40011214/article/details/108567054

版权

学习笔记专栏收录该内容

60 篇文章 3 订阅

订阅专栏

首先暴露webpack相关配置执行如下代码

npm run eject

下载 less及less-loader 我这里使用的yarn 你们根据你们的情况进行下载

yarn add less less-loader

进入到根目录下config中的webpack.config.js 配置文件中在sass-loader 的后面添加如下代码

大概493行左右

 // Less 解析配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,//开启
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              )
            },

其中 modules：true 即为开启CSS Modules的地方