全局样式配置

一、模块化引入样式

1. 创建两个组件

   • src\components\Comp1\Comp1.tsx
   • src\components\Comp2\Comp2.tsx

   import React from "react";
   
   const Comp1 = () => {
     return (
       <div>
         <p>comp1</p>
       </div>
     );
   };
   
   export default Comp1;
   

2. 创建 src\components\Comp1\Comp1.module.scss

   .box {
     color: red;
   }
   

3. Comp1.tsx 模块化引入样式

   import React from "react";
   import styles from "./Comp1.module.scss";
   
   const Comp1 = () => {
     return (
       <div className={styles.box}>
         <p>comp1</p>
       </div>
     );
   };
   
   export default Comp1;
   

4. 安装 antd 按需引入

   npm i less consola  vite-plugin-style-import -D
   

5. vite.config.ts 配置按需引入

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import path from "path";
   import {
     createStyleImportPlugin,
     AntdResolve,
   } from "vite-plugin-style-import";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       react(),
       createStyleImportPlugin({
         resolves: [AntdResolve()],
       }),
     ],
     css: {
       preprocessorOptions: {
         less: {
           javascriptEnabled: true,
           modifyVars: {
             "@primary-color": "#4377FE", //设置antd主题色
           },
         },
       },
     },
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },
     },
   });
   

6. App.tsx 查看配置

   import Comp1 from "@/components/Comp1/Comp1";
   import Comp2 from "@/components/Comp2/Comp2";
   import { Button } from "antd";
   import { StepBackwardOutlined } from "@ant-design/icons";
   
   function App() {
     return (
       <div className="App">
         <Button type="primary">123</Button>
         <StepBackwardOutlined />
         <Comp1 />
         <Comp2 />
       </div>
     );
   }
   
   export default App;