Vite Plugin CSS Global

英文文档

简介

Vite Plugin CSS Global 是一个 Vite 插件，用于全局注入 Less、SCSS 或 Sass 全局文件, 功能类似于 webpack 中使用 additionalData 注入全局文件, 但是你只需要传入你需要注入的文件路径即可。vue 文件也可用。

安装

npm install --save-dev @json_vite_plugin/css_global

或者

yarn add --dev @json_vite_plugin/css_global

或者

pnpm add @json_vite_plugin/css_global -D

用法

在你的 vite.config.js 文件中，添加以下代码：

import { defineConfig } from 'vite';
import cssGlobal from '@json_vite_plugin/css_global';

export default defineConfig({
  plugins: [
    cssGlobal({
      less: [], // 需要注入的less文件
      sass: [], // 需要注入的sass文件
      scss: [], // 需要注入的scss文件
      exclude: [], // 过滤掉的文件, 写哪些文件不需要注入全局文件
      isVue: false // 如果你需要在 vue 文件中注入就填true
    }),
  ],
});

你也可以在你的 vite.config.ts 文件中，添加以下代码：

import { defineConfig } from 'vite';
import cssGlobal from '@json_vite_plugin/css_global';

export default defineConfig({
  plugins: [
    cssGlobal({
      less: [], // 需要注入的less文件
      sass: [], // 需要注入的sass文件
      scss: [], // 需要注入的scss文件
      exclude: [], // 过滤掉的文件, 写哪些文件不需要注入全局文件
      isVue: false // 如果你需要在 vue 文件中注入就填true
    }),
  ],
});

选项

| 选项 | 类型 | 默认值 | 描述 | | --------- | ---------- | ------- | ------------------------ | | exclude | string[] | [] | 排除的文件或目录。 | | less | string[] | [] | 要全局注入的 Less 文件。 | | scss | string[] | [] | 要全局注入的 SCSS 文件。 | | sass | string[] | [] | 要全局注入的 Sass 文件。 | | isVue | bool | false | 是否为 vue 项目。 |

示例

以下是一个使用 Vite Plugin CSS Global 的示例：

// vite.config.js
import { defineConfig } from 'vite';
import cssGlobal from 'vite-plugin-css-global';

export default defineConfig({
  plugins: [
    cssGlobal({
      less: ['src/styles/global.less'],
      scss: ['src/styles/global.scss'],
      sass: ['src/styles/global.sass'],
      exclude: [
        'src/styles/global.less',
        'src/styles/global.scss',
        'src/styles/global.sass'
      ],
      isVue: true
    }),
  ],
});

在这个示例中，我们使用 Vite Plugin CSS Global 来全局注入 src/styles/global.less、src/styles/global.scss 和 src/styles/global.sass 文件。

然后，我们在 less、scss 或 sass 文件中使用了全局文件中的变量或方法, 不再需要去less、scss 或 sass文件中单独引用全局文件。

反馈 如果有bug反馈请发送邮箱到 [email protected]