Skip to content

windlil/unplugin-import-global-css

Repository files navigation

unplugin-import-global-css

NPM version

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

image

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