vite4+react+antdの注意点、ローカルsvgは別途参照

モバイル 2023-10-01 01:23:18 訪問数: null

1.less、css、sassが反映されない問題。

プラン1

Less、css、または sass でモジュール性を使用する必要がある場合は、すべてのサフィックス名に *.module.less などの「module」を追加する必要があります。そうしないと効果がありません

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 インストール 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()],
});

2. ローカルの動的 SVG。

vite-プラグイン-svgr

依存関係「vite-plugin-svgr」をインストールします:「^3.2.0」、svgr() を vite.config.ts に追加します

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;
		}

SVG ダイナミック コンポーネント参照、vite の各ローカル SVG を個別に参照できます。

umi システムでの以前の使用法:

javascript复制代码import {
  CaretDownOutlined,
  LeftOutlined,
  QaWenjianquanxiankongzhiOutlined,
  QaXiazairizhiOutlined
} from "@@/plugin-icons";

上記の動的 SVG の手順を完了した後。次の手順を実行します。 1. 次のように、更新されたディレクトリに plugins フォルダを作成し、その中に icons フォルダを作成します。

画像.png

 

createIndex.js は、js スクリプトを実行するために使用されるスクリプト ファイルです。Index.source.tsx は、SVG をエクスポートするためのオリジナルの JS リファレンス コードです。Index.tsx は、createIndex.js スクリプトを実行することによって生成されるファイルです。createIndex.jsは以下の通り

ini复制代码// 引入核心模块(fs)
import fs from 'fs';
import path from 'path';
// API
let fileContent = `//本文件采用命令生成，不要手动修改，具体查看createIndex.js,执行命令：yarn buildLocalIcons
const allIcons: any = import.meta.glob('/plugins/icons/svg/*/*.svg', { eager: true });
// 匹配到的首字母或斜杠字母转为大写
const toUpperCase = (match: string) => match?.replace('-', '').toUpperCase();
const iconList: any = {};
Object.keys(allIcons).forEach((key) => {
	const arr = key.split('/');
	const name = arr[arr.length - 1].split('.')[0];
	// 用正则匹配转化单词,转化后加上风格
	const suffix = key.indexOf('/filled/') > -1 ? 'Filled' : 'Outlined';
	const iconKey = name.replace(/(^[a-z]|\-[a-z])/g, (match) => toUpperCase(match)) + suffix;
	const Icon = allIcons[key].ReactComponent || null;
	iconList[iconKey] = Icon;
});
export default iconList;
`
// 匹配到的首字母或斜杠字母转为大写
const toUpperCase = (match) => match?.replace('-', '').toUpperCase();
function walkSync (currentDirPath, callback) {
	fs.readdirSync(currentDirPath, { withFileTypes: true }).forEach(function (dirent) {
		var filePath = path.join(currentDirPath, dirent.name);
		if (dirent.isFile()) {
			callback(filePath, dirent);
		} else if (dirent.isDirectory()) {
			walkSync(filePath, callback);
		}
	});
}

const files = []
walkSync('./plugins/icons/svg/', function (filePath, stat) {
	files.push(filePath)
});
const iconNames = []
files.forEach((key) => {
	if (key.indexOf('.svg') > -1) {
		const arr = key.split('/');
		const name = arr[arr.length - 1].split('.')[0];
		// 用正则匹配转化单词,转化后加上风格
		const suffix = key.indexOf('/filled/') > -1 ? 'Filled' : 'Outlined';
		const iconKey = name.replace(/(^[a-z]|\-[a-z])/g, (match) => toUpperCase(match)) + suffix;
		iconNames.push(iconKey)
	}
})
iconNames.forEach((key) => {
	fileContent += `export const ${key} = iconList['${key}'];\n`
})

fs.writeFile('./plugins/icons/index.tsx', fileContent, (error) => {
	// 创建失败
	if (error) {
		console.log('\x1B[31m%s\x1B[0m', `创建失败：${error}`);
	}
	// 创建成功
	console.log('\x1B[36m%s\x1B[0m', '创建本地Icons成功！');
});

Index.tsx の内容は以下と同じですが、exportdefaulticonList; の後ろのコードが抜けています。

ini复制代码//本文件采用命令生成，不要手动修改，具体查看createIndex.js,执行命令：yarn buildLocalIcons
const allIcons: any = import.meta.glob('/plugins/icons/svg/*/*.svg', { eager: true });
// 匹配到的首字母或斜杠字母转为大写
const toUpperCase = (match: string) => match?.replace('-', '').toUpperCase();
const iconList: any = {};
Object.keys(allIcons).forEach((key) => {
	const arr = key.split('/');
	const name = arr[arr.length - 1].split('.')[0];
	// 用正则匹配转化单词,转化后加上风格
	const suffix = key.indexOf('/filled/') > -1 ? 'Filled' : 'Outlined';
	const iconKey = name.replace(/(^[a-z]|-[a-z])/g, (match) => toUpperCase(match)) + suffix;
	const Icon = allIcons[key].ReactComponent || null;
	iconList[iconKey] = Icon;
});
export default iconList;
export const AntShopFilled = iconList['AntShopFilled'];
export const BasicFilled = iconList['BasicFilled'];
export const CallFilled = iconList['CallFilled'];
export const CardFilled = iconList['CardFilled'];
export const CloseFilled = iconList['CloseFilled'];
export const CmsFilled = iconList['CmsFilled'];
export const DashboardFilled = iconList['DashboardFilled'];
export const DownloadFilled = iconList['DownloadFilled'];
export const DsFilled = iconList['DsFilled'];
export const EmailFilled = iconList['EmailFilled'];
export const MenuFilled = iconList['MenuFilled'];
export const NsShopguideFillFilled = iconList['NsShopguideFillFilled'];
export const QaBiaoqianxinxiFilled = iconList['QaBiaoqianxinxiFilled'];
export const QaCuxiaohuodongFilled = iconList['QaCuxiaohuodongFilled'];
export const QaDingdanxinxiFilled = iconList['QaDingdanxinxiFilled'];
export const QaJifentixiFilled = iconList['QaJifentixiFilled'];
export const QaShangpinshezhiFilled = iconList['QaShangpinshezhiFilled'];
export const QaShangpinshujuFilled = iconList['QaShangpinshujuFilled'];
export const QaViptixiFilled = iconList['QaViptixiFilled'];
export const QaYonghuxinxiFilled = iconList['QaYonghuxinxiFilled'];
export const SendFilled = iconList['SendFilled'];
export const ShoujiguanliyuanFilled = iconList['ShoujiguanliyuanFilled'];
export const SmsFilled = iconList['SmsFilled'];
export const VmsFilled = iconList['VmsFilled'];
export const XiadanguanhuaiFilled = iconList['XiadanguanhuaiFilled'];
export const YsFilled = iconList['YsFilled'];
export const AntShopOutlined = iconList['AntShopOutlined'];
export const ApiOutlined = iconList['ApiOutlined'];
export const CaretDownOutlined = iconList['CaretDownOutlined'];
export const CloseOutlined = iconList['CloseOutlined'];
export const DangerSelectOutlined = iconList['DangerSelectOutlined'];
export const DashboardOutlined = iconList['DashboardOutlined'];
export const DateSelectOutlined = iconList['DateSelectOutlined'];
export const DateSetOutlined = iconList['DateSetOutlined'];
export const DateOutlined = iconList['DateOutlined'];
export const DeleteOutlined = iconList['DeleteOutlined'];
export const DeletesOutlined = iconList['DeletesOutlined'];
export const DetailgegevensOutlined = iconList['DetailgegevensOutlined'];
export const DownOutlined = iconList['DownOutlined'];
export const DragOutlined = iconList['DragOutlined'];
export const DsOutlined = iconList['DsOutlined'];
export const EditOutlined = iconList['EditOutlined'];
export const FieldOutlined = iconList['FieldOutlined'];
export const FiltersOutlined = iconList['FiltersOutlined'];
export const FundOutlined = iconList['FundOutlined'];
export const GroupingOutlined = iconList['GroupingOutlined'];
export const HomeOutlined = iconList['HomeOutlined'];
export const LeftOutlined = iconList['LeftOutlined'];
export const MenuOutlined = iconList['MenuOutlined'];
export const NsArrowDoubledownOutlined = iconList['NsArrowDoubledownOutlined'];
export const NsArrowDoubleleftOutlined = iconList['NsArrowDoubleleftOutlined'];
export const NsArrowDoublerightOutlined = iconList['NsArrowDoublerightOutlined'];
export const NsArrowDoubleupOutlined = iconList['NsArrowDoubleupOutlined'];
export const NsFileExcelnumberOutlined = iconList['NsFileExcelnumberOutlined'];
export const NsFilePictureOutlined = iconList['NsFilePictureOutlined'];
export const NsFileWorddefaultOutlined = iconList['NsFileWorddefaultOutlined'];
export const NsHelpOutlined = iconList['NsHelpOutlined'];
export const NsMoneyOutlined = iconList['NsMoneyOutlined'];
export const NsPeopleOutlined = iconList['NsPeopleOutlined'];
export const NsPicDefeatedOutlined = iconList['NsPicDefeatedOutlined'];
export const NsServiceOutlined = iconList['NsServiceOutlined'];
export const NsTimeOutlined = iconList['NsTimeOutlined'];
export const NumberOutlined = iconList['NumberOutlined'];
export const ProjectOutlined = iconList['ProjectOutlined'];
export const QaBackOutlined = iconList['QaBackOutlined'];
export const QaBrandArrowOutlined = iconList['QaBrandArrowOutlined'];
export const QaCaidanOutlined = iconList['QaCaidanOutlined'];
export const QaMoreOutlined = iconList['QaMoreOutlined'];
export const QaSettingOutlined = iconList['QaSettingOutlined'];
export const QitaOutlined = iconList['QitaOutlined'];
export const RightOutlined = iconList['RightOutlined'];
export const SaveOutlined = iconList['SaveOutlined'];
export const SettingOutlined = iconList['SettingOutlined'];
export const ShezhiOutlined = iconList['ShezhiOutlined'];
export const TextOutlined = iconList['TextOutlined'];
export const UpOutlined = iconList['UpOutlined'];
export const VolcanoBackOutlined = iconList['VolcanoBackOutlined'];
export const VolcanoCaretDownOutlined = iconList['VolcanoCaretDownOutlined'];

プロジェクトを実行する前に、まずローカル アイコンを生成します。SVG に新たな変更を加えた場合は、再実行する必要があります。

json复制代码"dev": " yarn buildLocalIcons && vite --force --mode development",
"build": "yarn buildLocalIcons && vite build --mode production",
"buildLocalIcons": "node ./plugins/icons/createIndex.js",

関連性は低い、rgb(0 0 0 / 25%) の問題

vite.config.ts

css复制代码css:{
    devSourcemap: true,
    preprocessorOptions:{
        less: {
            // math: 'always',//如果开启always会把less里面的rgb(0 0 0 / 25%)变黑色
            javascriptEnabled: true,
        },
    }
}
    ```

 

おすすめ

転載: blog.csdn.net/Cipher_Y/article/details/132192791
おすすめ
これは Linus が最も耐えられないエピソードです - Unreal Engine のコード仕様により、汚い言葉、スレーブ、マスターの使用が禁止されています
ランキング
図10は、1〜20の繰り返しの間の乱数を生成し、DESCを出力しません
何をすべきかについてのPMOの話
Windows mingw64 の最も簡単なインストール構成
JVM-ガベージコレクション
ネットワークアーキテクチャ
詳細な使用Pythonの収率（未完）
eoj 1021 配列を使用して n クイーン問題を解決します (矛盾するクイーン対数を出力します)
2020-08-05-ハンガリーアルゴリズム
Pythonが曜日を決定します
[ホワイト] Day22道路は、分類アルゴリズムの概要の質問を磨きます
アーカイブ
もっと
2024-05-25(1)
2024-05-24(11)
2024-05-23(35)
2024-05-22(9)
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)

コードワールド

© 2018 codetd.com