react怎么配置less

在react中配置less

1. 创建React 工程

npx create-react-app my-app

2.添加less和less-loader 两个依赖库

npm install less@3.9.0
npm install less-loader@4.1.0

注意:

如果步骤3 在步骤2前先执行,则需要【删除】项目中的package-lock.json后, 重新执行步骤2即可。

3. 弹出配置文件以便自定义项目配置

npm run eject

4. 打开config/webpack.config.js 文件,开始配置工作

修改style files regexes(样式文件正则)

参照 sass 配置 less 的样式文件正则

企业微信截图_16006679455039.png

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

5.修改getStyleLoaders函数,并添加如下代码

同样,参照css-loader节点,添加less-loader节点

企业微信截图_16006679252275.png

  {
       loader: require.resolve('less-loader'),
       options: lessOptions,
     },

6.模仿代码中提供的sassRegex代码,添加如下代码

企业微信截图_16006679041799.png

        // Adds support for LESS Modules, but using LESS 
            // less start
            {
              test: lessRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            }, // less end;

以上就是react怎么配置less的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏