CSS import injects content into page via style tag
Importing `.css` files will inject its content to the page via a `<style>` tag with HMR support.
assets and imports
40 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Glob import default export
Set `import` to `'default'` to import the default export in glob imports. Example: `const modules = import.meta.glob('./dir/*.js', { import: 'default', eager: true })`
Glob import custom queries
The `query` option in glob imports can be used to provide queries to imports, for example to import assets as a string or URL. Example: `const moduleStrings = import.meta.glob('./dir/*.svg', { query: '?raw', import: 'default' })`
JSON files support named imports
JSON files can be directly imported with named imports for root fields. For example, `import { field } from './example.json'` helps with tree-shaking.
Static asset import returns resolved public URL
Importing a static asset will return the resolved public URL when it is served. For example, `import imgUrl from './img.png'` returns the URL string.
Asset query ?url loads assets as explicit URL
The query `?url` can be appended to explicitly load assets as URL, automatically inlined depending on file size. Example: `import assetAsURL from './asset.js?url'`
Asset query ?raw loads assets as strings
The query `?raw` can be appended to load assets as strings. Example: `import assetAsString from './shader.glsl?raw'`
Asset query ?worker loads Web Workers
The query `?worker` can be appended to load Web Workers. Example: `import Worker from './worker.js?worker'`
Asset query ?worker&inline inlines Web Workers as base64
The query `?worker&inline` loads Web Workers inlined as base64 strings at build time. Example: `import InlineWorker from './worker.js?worker&inline'`
CSS @import inlining and rebasing
Vite is pre-configured to support CSS `@import` inlining via `postcss-import`. Vite aliases are also respected for CSS `@import`. All CSS `url()` references are automatically rebased to ensure correctness, even if imported files are in different directories.
PostCSS automatically applied if config exists
If the project contains valid PostCSS config (any format supported by postcss-load-config, e.g. `postcss.config.js`), it will be automatically applied to all imported CSS.
CSS minification runs after PostCSS
CSS minification will run after PostCSS and will use the `build.cssTarget` option.
CSS Modules file naming convention
Any CSS file ending with `.module.css` is considered a CSS modules file. Importing such a file will return the corresponding module object with class names as properties.
CSS Modules camelCase locals with named imports
If `css.modules.localsConvention` is set to enable camelCase locals (e.g. `localsConvention: 'camelCaseOnly'`), you can use named imports from CSS modules. Example: `import { applyColor } from './example.module.css'` for a class named `.apply-color`
CSS pre-processors supported with built-in support
Vite provides built-in support for `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files. There is no need to install Vite-specific plugins, but the corresponding pre-processor itself must be installed.
CSS pre-processors alias and rebasing support
Vite improves `@import` resolving for Sass and Less so that Vite aliases are respected. Relative `url()` references inside imported Sass/Less files that are in different directories are also automatically rebased to ensure correctness.
CSS modules combined with pre-processors
You can use CSS modules combined with pre-processors by prepending `.module` to the file extension, for example `style.module.scss`.
Disable CSS injection into the page with ?inline
The automatic injection of CSS contents can be turned off via the `?inline` query parameter. The processed CSS string is returned as the module's default export, but the styles are not injected to the page. Example: `import otherStyles from './bar.css?inline'`
Default and named imports from CSS removed since Vite 5
Default and named imports from CSS files are removed since Vite 5. Use the `?inline` query instead to get the processed CSS string.
Lightning CSS used for CSS minification by default
Vite uses Lightning CSS to minify CSS in production builds by default. However, PostCSS is still used for other CSS processing.
Experimental Lightning CSS support for full CSS processing
There is experimental support for using Lightning CSS for CSS processing entirely. You can opt into it by adding `css.transformer: 'lightningcss'` to the config.
Glob import basic syntax
Vite supports importing multiple modules from the file system via the special `import.meta.glob` function. Example: `const modules = import.meta.glob('./dir/*.js')` is transformed into an object with file paths as keys and dynamic import functions as values.
Glob import eager loading
Matched files in glob imports are by default lazy-loaded via dynamic import. To import all modules directly, pass `{ eager: true }` as the second argument: `const modules = import.meta.glob('./dir/*.js', { eager: true })`
Glob import multiple patterns
The first argument to `import.meta.glob` can be an array of globs. Example: `const modules = import.meta.glob(['./dir/*.js', './another/*.js'])`
Glob import negative patterns
Negative glob patterns are supported in glob imports, prefixed with `!`. Example: `const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])` excludes bar.js from the result.
Glob import named imports
It's possible to only import parts of the modules with the `import` option in glob imports. Example: `const modules = import.meta.glob('./dir/*.js', { import: 'setup' })` imports only the `setup` export from each module.
Glob import with eager and named imports enables tree-shaking
When combining `eager: true` with `import` option in glob imports, tree-shaking is enabled for those modules. Example: `const modules = import.meta.glob('./dir/*.js', { import: 'setup', eager: true })`
Glob import base path option
The `base` option in glob imports can be used to provide a base path for the imports. The base option can only be a directory path relative to the importer file or absolute against the project root. Example: `const modulesWithBase = import.meta.glob('./**/*.js', { base: './base' })`
Glob import case-sensitive matching
By default, glob pattern matching in glob imports is case-sensitive. Use the `caseSensitive` option to change this behavior. Example: `const modules = import.meta.glob('./dir/module*.js', { caseSensitive: false })`
Glob import patterns must be static literals
All arguments in `import.meta.glob` must be passed as literals. You cannot use variables or expressions in glob patterns.
Glob import patterns must be relative or alias paths
Glob patterns must be either relative (start with `./`), absolute (start with `/`, resolved relative to project root), or an alias path. The glob matching is done via `tinyglobby`.
Dynamic import variable restrictions
Vite supports dynamic import with variables, but variables only represent file names one level deep. For more advanced usage, use glob import instead.
Dynamic import bundling rules
For dynamic imports to be bundled, imports must start with `./` or `../`, must end with a file extension, and imports to the own directory must specify a file name pattern. Example: `import('./dir/prefix-${foo}.js')` is valid, but `import(`./${foo}.js`)` is not.
WebAssembly ESM integration
A `.wasm` file can be imported directly as an ES module. Vite reads the module's imports and exports from the binary, instantiates it, and re-exposes its exports as named ES module exports. Example: `import { add } from './add.wasm'`
WebAssembly direct import is async
A directly imported `.wasm` file behaves as an async module and requires top-level `await` support, as the WebAssembly module is instantiated asynchronously.
WebAssembly manual initialization with ?init
When you need control over instantiation, import WebAssembly with `?init`. The default export will be an initialization function that returns a Promise of the WebAssembly.Instance. Example: `import init from './example.wasm?init'`
WebAssembly init function accepts importObject
The init function from WebAssembly `?init` import can accept an importObject which is passed along to WebAssembly.instantiate as its second argument.
WebAssembly TypeScript support with allowArbitraryExtensions
To fix TypeScript errors with `.wasm` file imports, enable `allowArbitraryExtensions` in `tsconfig.json` and create a declaration file named `{filename}.d.wasm.ts` next to your `.wasm` file. Example: for `add.wasm`, create `add.d.wasm.ts` with export declarations.
WebAssembly small files inlined in production
In the production build, `.wasm` files smaller than `assetsInlineLimit` will be inlined as base64 strings. Otherwise, they will be treated as a static asset and fetched on-demand.
WebAssembly URL import for multiple instantiation
To access the WebAssembly Module object for multiple instantiation, use an explicit URL import to resolve the asset. Example: `import wasmUrl from 'foo.wasm?url'` followed by `WebAssembly.instantiateStreaming(fetch(wasmUrl))`