用customize-cra+react-app-rewired配置px2rem

news/2024/7/15 17:58:05 标签: react.js, 前端, 前端框架

1.安装

npm i react-app-rewire-postcss postcss-px2rem -D

2. 配置项

//config-overrides.js
const { override } = require('customize-cra');
const addLessLoader = require("customize-cra-less-loader");
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem");

module.exports = {
  webpack: override(
    addLessLoader({
      // strictMath: true,
      // noIeCompat: true,
      // loader: "css-loader",
      // options: {
      //   modules: {
      //     localIdentName: "[name]__[local]___[hash:base64:5]",
      //   },
      //   sourceMap: true
      // },
      // css loader options 
      cssLoaderOptions: {
        modules: {
          localIdentName: '[file]',
        }, 
      },
      // less loader options
      lessLoaderOptions: {
        lessOptions: {
          strictMath: true,
        }
      }
    }),

    (config) => {
    	// px2rem配置项
      rewirePostcss(config, {
        plugins: () => [
          px2rem({
            remUnit: 100,
            exclude: /node_modules/i, // 当这里不起作用时,可以用postcss-px2rem-exclude试试
          }),
        ],
      });

      return config;
    }
  )
}

3. 重新启动

npm start

http://www.niftyadmin.cn/n/5226200.html

相关文章

PHP+ajax+layui实现双重列表的动态绑定

需求:商户下面有若干个门店,每个门店都需要绑定上收款账户 方案一:每个门店下面添加页面,可以选择账户去绑定。(难度:简单) 方案二:从商户进入,可以自由选择门店&#…

力扣labuladong——一刷day59

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、力扣549. 二叉树中最长的连续序列二、力扣1325. 删除给定值的叶子节点 前言 像求和、求高度这种基本的二叉树函数很容易写,有时候只要在它们的后…

Linux常用命令----cp 命令

文章目录 1. 基本用法2. 保留文件属性3. 递归复制4. 仅复制更新的文件5. 交互式复制6. 创建符号链接而非复制7. 复制并备份目标文件8. 指定备份后缀9. 详细输出总结 Linux操作系统中,cp 命令是一个非常基础且强大的工具,用于复制文件或目录。本文将详细介…

【开源视频联动物联网平台】LiteFlow

LiteFlow是一个轻量且强大的国产规则引擎框架,可用于复杂的组件化业务的编排领域。它基于规则文件来编排流程,支持xml、json、yml三种规则文件写法方式,再复杂的逻辑过程都能轻易实现。LiteFlow于2020年正式开源,2021年获得开源中…

汽车悬架底盘部件自动化生产线3d检测蓝光三维测量自动化设备-CASAIM-IS(2ND)

随着汽车工业的不断发展,对于汽车零部件的制造质量和精度要求也在不断提高。汽车悬架底盘部件作为汽车的重要组成部分,其制造质量和精度直接影响到整车的性能和安全性。因此,采用CASAIM-IS(2ND)蓝光三维测量自动化设备…

CSS预处理器(如Sass或Less):变量、嵌套规则和混合器等高级功能

在Vue项目中,可以使用CSS预处理器(如Sass或Less)来编写样式。 这些预处理器提供了一些高级功能,如变量、嵌套规则和混合器等。 1. 变量 在Sass中,我们可以使用$符号定义变量。这些变量方便我们在多个地方重复使用&a…

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION (Paper reading) Ziwei Luo, Uppsala University, ICLR under review(6663), Cited:None, Stars: 350, Code, Paper. 1. 前言 像CLIP这样的视觉语言模型已经显示出对零样本或无标签预测的各种下游任务…

开源免费跨平台数据同步工具-Syncthing

Syncthing是一款开源免费跨平台的文件同步工具,是基于P2P技术实现设备间的文件同步,所以它的同步是去中心化的,即你并不需要一个服务器,故不需要担心这个中心的服务器给你带来的种种限制,而且类似于torrent协议&#x…