In 2021 rare earth developers conference recording heard Xue Yingchen god mentioned WindicSS. As a user of a similar tool, I was deeply hurt by tailwind + Nuxt, and the package release time was always high at 15 to 20 minutes, depending on the technical level. And unlike Tailwind, Windi is scanned and regenerated first. Just now learn a little react fur, first test the water.

1. Install YARN add Windicss-webpack-plugin -d

2. Configuration webpack. Config. Js

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

3. Add windi.config.js to the root directory. This configuration is not exactly the same as tailwind

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'],
  },
})
Copy the code

4. Add import ‘windi.css’ to SRC entry file

The aboveisThe document, but the actual configuration of the time or encountered a pit

  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.

Solutions:

- new WindiCSSWebpackPlugin()
+ new WindiCSSWebpackPlugin({
    virtualModulePath: 'src',
  })
Copy the code
  1. ./src/index.js

Module not found: Can’t resolve ‘windi.css’ in ‘/Users/zhujunyi/Desktop/yunlsp/booking-web-admin-react/src’

Solutions:

- import 'windi.css'
+ import './virtual:windi.css'
Copy the code