Интеграция для Gridsome #

Установка #

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

⚠️ Этот модуль является предварительным выпуском, пожалуйста, сообщайте о любых проблемах, которые вы обнаружите.

Применение #

Внутри вашего 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, обратитесь к документации по вопросам миграции.

Конфигурация #

• По умолчанию:

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',
    },
  },
}

• Смотрите options.ts для справки по конфигурации.

Примеры #

Отключить предпечатную проверку #

gridsome.config.js

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

Предостережения #

Стили Scoped #

Директива @media со стилем с областью видимости может **работать * только с css postcss scss, но не sass, less или stylus