Windi CSS Gridsome

安裝

yarn add gridsome-plugin-windicss -D
# npm i gridsome-plugin-windicss -D

?? 此模塊是預(yù)發(fā)布版，請報(bào)告您發(fā)現(xiàn)的任何問題。

用法

在您的 gridsome.config.js 中添加以下內(nèi)容。

?gridsome.config.js?

export default {
  // ...
  plugins: [
    {
      use: 'gridsome-plugin-windicss',
      options: {
        // see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
      },
    },
  ],
}

此模塊不適用于 gridsome-plugin-tailwindcss，您需要將其刪除。

 plugins: [
    {
-      use: 'gridsome-plugin-tailwindcss',
-      options: {
-        // ...
-      }
    },
  ],

如果您有 ?tailwind.config.js?，請將其重命名為 ?windi.config.js? 或 ?windi.config.ts?。

遷移

如果您以前使用過 gridsome-plugin-tailwindcss，請參閱有關(guān)遷移的文檔。

配置

• 默認(rèn):

export default {
  scan: {
    dirs: ['./'],
    exclude: [
      'node_modules',
      '.git',
      'dist',
      '.cache',
      '*.template.html',
      'app.html',
    ],
    include: [],
  },
  transformCSS: 'pre',
  preflight: {
    alias: {
      // add gridsome aliases
      'g-link': 'a',
      'g-image': 'img',
    },
  },
}

• 有關(guān)配置參考，請參閱 options.ts。

例子

禁用預(yù)檢

?gridsome.config.js?

export default {
  // ...
  plugins: [
    {
      use: 'gridsome-plugin-windicss',
      options: {
        preflight: false,
      },
    },
  ],
}

注意事項(xiàng)

Scoped Style

具有作用域樣式的 @media 指令只能與 css postcss scss 一起使用，但不能與 sass、less 或 stylus 一起使用