vite4+react+antd需要注意的地方，本地svg单独引用

最新推荐文章于 2024-08-09 07:40:39 发布

Cipher_Y

最新推荐文章于 2024-08-09 07:40:39 发布

阅读量524

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/Cipher_Y/article/details/132192791

版权

本文主要介绍了在Vite4+React+Antd环境中遇到的less、css、sass不生效的问题及解决方案，以及如何实现本地SVG的动态组件引用。针对less中rgb颜色比例问题和SVG图标引用进行了详细说明。

摘要由CSDN通过智能技术生成

一、less、css、sass不生效问题。

方案1

less或者css，sass需要用到模块化的话，后缀名全部要加上《module》如*.module.less。否则不会生效

js复制代码import styles from './index.module.less';
<div className={styles.oneApp}>生效。

vite.config.ts添加css和less

css: {
    //* css模块化
    modules: {
            // css模块化 文件以.module.[css|less|scss]结尾 
        generateScopedName:'[name]__[local]___[hash:base64:5]',hashPrefix:'prefix',
	 },
	// 预处理器配置项
			preprocessorOptions: {
				less: {
					math: 'always',
					javascriptEnabled: true,
				},
			},
		},

方案2

npm install vite-plugin-style-modules

jsx复制代码import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteCssModule from 'vite-plugin-style-modules';
// 支持ESM和CommonJS两种方式引入
// const viteCssModule = require('vite-plugin-style-modules')

export default defineConfig({
  plugins: [react(), viteCssModule()],
});

二、本地动态svg。

vite-plugin-svgr

安装依赖 "vite-plugin-svgr": "^3.2.0", vite.config.ts添加svgr()

js复制代码import svgr from 'vite-plugin-svgr';
plugins: [react(), svgr()]

tsconfig.json的compilerOptions加入属性

js复制代码"compilerOptions": {
		"types": ["vite-plugin-svgr/client"],

渲染组件

jsx复制代码// 动态渲染图标
const IconRender: React.FC<{
	icon: string;
	className?: string;
}> = ({ icon, ...restIconProps }) => {
	if (typeof icon !== 'string') return null; // 图标名称类型必定为string
	const allIcons: any = import.meta.glob('/plugins/icons/svg/*/*.svg', { eager: true });
	const Icon = allIcons[`/plugins/icons/svg/filled/${icon}.svg`].ReactComponent || null;
	return <Icon {...restIconProps} />;
};

jsx复制代码<IconRender
icon={item.icon}
className={cn(styles.oneItemIcon, styles.menuIcon)}/>

其中，menuIcon的样式，注意：menuIcon里面一定要有fill:currentColor，颜色才会生效

less复制代码.oneItemIcon {
			font-size: 16px;
			vertical-align: top;
		}
		.menuIcon {
			display: inline-block;
			fill: currentColor;
			color: inherit;
			font-style: normal;
			line-height: 0;
			text-align: center;
			text-transform: none;
			vertical-align: -0.125em;
			text-rendering: optimizeLegibility;
			-webkit-font-smoothing: antialiased;
			width: 1em;
			height: 1em;
		}