react配置less

骑猪看日落 2022-10-17 04:20 217阅读 0赞

## 我使用的是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**  
![在这里插入图片描述][20210601165529133.png]

// 常用字号
    @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();

[20210601165529133.png]: /images/20221014/c747543b19a54138a113e6dcc6adcc4f.png