create-react-app项目应用初试Windi CSS

在看2021稀土开发者大会录播里听到薛英琛大神提到了windicss。作为一个类似工具的使用者，深深的被tailwind + nuxt伤害过，限于技术水平，打包发布的时间一直高居15到20分钟。而且与tailwind不同，windi是先扫描再生成。正好目前学习了一点react皮毛，就先试试水。

1.安装 yarn add windicss-webpack-plugin -D

2.配置webpack.config.js

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
export default {
  // ...
  plugins: [
    new WindiCSSWebpackPlugin(),
  ],
}

3.根目录下增加windi.config.js,这个配置跟tailwind.config.js并不完全一样，需要改动

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    // A common use case is scanning files from the root directory
    include: ['**/*.{html,css,jsx,tsx}'],
    // if you are excluding files, make sure you always include node_modules and .git
    exclude: ['node_modules', '.git', 'dist'],
  },
})

4.src的入口文件添加 import 'windi.css'

以上是文档，但是实际配置的时候还是碰到了坑

1. ./src/index.js Module not found: You attempted to import /Users/*****/Desktop/yunlsp/booking-web-admin-react/virtual:windi.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

解决办法：

- new WindiCSSWebpackPlugin()
+ new WindiCSSWebpackPlugin({
    virtualModulePath: 'src',
  })

2. ./src/index.js Module not found: Can't resolve 'windi.css' in '/Users/zhujunyi/Desktop/yunlsp/booking-web-admin-react/src'

解决办法：

- import 'windi.css'
+ import './virtual:windi.css'