Logo Windi CSS

Gridsome 集成

安装 

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

⚠️ 该模块是预发行版本，请反馈你发现的任何问题 。

使用

在 gridsome.config.js 中添加以下内容。

gridsome.config.js
export default {
  // ...
  plugins: [
    {
      use: 'gridsome-plugin-windicss',
      options: {
        // 详见 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，请参考有关迁移的文档。

配置

  • 默认:
export default {
  scan: {
    dirs: ['./'],
    exclude: [
      'node_modules',
      '.git',
      'dist',
      '.cache',
      '*.template.html',
      'app.html',
    ],
    include: [],
  },
  transformCSS: 'pre',
  preflight: {
    alias: {
      // 添加 gridsome 别名
      'g-link': 'a',
      'g-image': 'img',
    },
  },
}

示例

禁用预检样式

gridsome.config.js

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

注意事项

样式作用域

限定样式作用域的 @media 指令只能与 css postcss scss 一起使用，不能和 sass, less stylus 一起使用。