unplugin-import-global-css

Auto import global css for Vue.

Features

• less code
• simpler code structure
• faster compilation
• supports Vite, Webpack, Vue CLI, Rollup, esbuild, powered by unplugin.

effect

install

pnpm i unplugin-import-global-css -D

Vite

import autocss from 'unplugin-import-global-css/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    autocss({ /* options */ })
  ],
})

Vue-cli

const autocss = require('unplugin-import-global-css/webpack')

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      autocss({ /* options */ })
    ],
  },
})

Rollup

// rollup.config.js
import autocss from 'unplugin-import-global-css/rollup'

export default {
  plugins: [
    autocss({ /* options */ }),
  ],
}

esbuild

import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-import-global-css/esbuild')({/* options */}),
  ],
})

Webpack

module.exports = {
  plugins: [
    require('unplugin-import-global-css/webpack')({ /* options */ }),
  ],
}

Usage

Auto import all css files from ./src/styles into main.(t/j)s, as global css.

❗If your global css are not in ./src/styles, you need to modify the plugin options.

Options

interface Options {
    globStylesPath?: string /* The path of the css folder relative to src, default: './styles' */
    inputName?: string /* input name, default: 'main' */
    inlcude?: string[] /* include auto import node_modules css such as: reset.css */
}

License

MIT License