react配置less

最新推荐文章于 2024-08-28 04:05:46 发布

丢失的林夕

最新推荐文章于 2024-08-28 04:05:46 发布

阅读量432

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/weixin_41217541/article/details/117446948

版权

react 专栏收录该内容

6 篇文章

订阅专栏

博客介绍使用customize-cra重写配置，涉及config-overrides.js文件。还以px转rem为例，阐述全局变量和函数的使用，主要有less自定义和在less中使用js函数两种实现方式，且less使用js需配置javascriptEnabled为true。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我使用的是customize-cra重写配置

config-overrides.js

const {override,fixBabelImports,addLessLoader,addWebpackAlias,addDecoratorsLegacy } =require('customize-cra');
const path = require("path")

module.exports = override(
    // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        style:true,//自动打包相关的样式 默认为 style:'css'
    }),
    // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
    addLessLoader({
        javascriptEnabled: true,
        modifyVars:{'@primary-color':'#1DA57A'}
    }),
    // 别名
    addWebpackAlias({
        "@": path.resolve(__dirname, "src")
    }),
    addDecoratorsLegacy(),
    (config) => {
        console.log(11,config)
        //修改、添加loader 配置 :
        // 所有的loaders规则是在config.module.rules(数组)的第二项
        // 即：config.module.rules[2].oneof  (如果不是，具体可以打印 一下是第几项目)
        // 修改 less 配置 ，规则 loader 在第7，8项(具体可以打印配置)
        const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
        console.log(22,loaders)
        loaders[8].use.push({
            loader: 'style-resources-loader',
            options: {
                javascriptEnabled: true,
                patterns: path.resolve(__dirname, 'src/assets/css/variables.less')//全局引入公共的scss 文件
            }
        })
        return config
    }
);

全局变量和函数使用,以px转rem为例

主要有两种实现方式:less自定义和在less中使用js函数，less使用js得配置javascriptEnabled为 true
在这里插入图片描述

// 常用字号
@root-font-size: 16px; //放在html节点上的尺寸，16 为基准
// less自定义函数，使用如：width:.rem(1920)[0]
.rem(@px){
	0:unit(@px / 16, rem);
};

// 使用js实现，使用方法width：~`rem(1920)`
.remMixin() {
	@functions: ~`(function() {
	  this.rem = function(size) {
		return size / 16 + 'rem';
	  }
	})()`;
}
.remMixin();