vue3 windicss引入与生成静态分析报告

源代码地址 ： https://github.com/HYzihong/vue3_use_case
git： https://github.com/HYzihong/vue3_use_case.gjt

引入 windicss

$ pnpm i windicss vite-plugin-windicss  -D

vite配置

/*
 * @Author: hy
 * @Date: 2022-02-01 01:19:55
 * @FilePath: /vue3UseCase/vite.config.ts
 * Copyright 2022 hy, All Rights Reserved.
 * 仅供学习使用~
 */
import { defineConfig } from 'vite';
// plugins
import WindiCSS from 'vite-plugin-windicss';
...

export default defineConfig({
  plugins: [WindiCSS()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/styles/index.scss" as *;`,  // 这里可以配置全局scss
        charset: false,
      },
    },
  },
});

windicss配置

/*
 * @Author: hy
 * @Date: 2022-02-01 03:57:30
 * @FilePath: /vue3UseCase/windi.config.ts
 * Copyright 2022 hy, All Rights Reserved.
 * 仅供学习使用~
 */
import { defineConfig } from 'windicss/helpers';
// import { defineConfig } from 'vite-plugin-windicss';

export default defineConfig({
  darkMode: 'class',
  extract: {
    include: ['./src/**/*.vue', './src/**/*.jsx', './src/**/*.tsx'],
  },
  theme: {
    extend: {
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        '2xl': '1600px',
      },
    },
  },
  plugins: [],
  // alias: {},
});

main.ts配置

/*
 * @Author: hy
 * @Date: 2022-02-01 01:19:55
 * @LastEditors: hy
 * @Description:
 * @LastEditTime: 2022-02-14 22:46:35
 * @FilePath: /vue3UseCase/src/main.ts
 * Copyright 2022 hy, All Rights Reserved.
 * 仅供学习使用~
 */
...
// css
import 'virtual:windi.css';
import './styles/elementPlus/index.scss';
...

生成windicss静态分析报告

$ pnpm i windicss-analysis -D

package.json 配置

...
"scripts": {
"css:analysis": "npx windicss-analysis",
},
...

生成windicss静态分析报告

$ pnpm css:analysis 
or 
$ npm run css:analysis 
or
$ yarn css:analysis