Less、Sass、Scss 全局引用变量

Vite Plugin CSS Global

开发前要

在之前学会了 webpack 全局引用 less 或 scss 的主题变量文件, 再也不需要再每个 vue 文件去写麻烦的 @import "@/index.less" 了, 结果今天用 vite 来搭建了一个react项目准备做开发, 发现 vite 当前不支持全局引用 less 或 scss 变量文件, 需要一个个去手动引入, 我感觉太麻烦了, 于是就开发了它! 最初我只打算做 react 的版本的, 结果想着写都写了, 干脆 vue 的也做了吧, 结果就都适用了。

英文文档

简介

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 或 vue 文件中单独引用全局文件。

反馈

如果有bug反馈请发送邮箱到 lijunsong2@gmail.com