vite-plugin-import-css-sheet
v1.0.9
Published
Small plugin that enables the use of tc39/proposal-import-attributes for css files in vite.
Downloads
13
Readme
vite-plugin-import-css-sheet
Small plugin that enables the use of tc39/proposal-import-attributes for css files in vite.
Any imported .css file that uses the with/assert syntax will be imported as a CSSStyleSheet
.
This plugin only covers .css imports and nothing else.
Install
npm
npm i vite-plugin-import-css-sheet --save-dev
pnpm
pnpm add -D vite-plugin-import-css-sheet
Enable
import { defineConfig } from 'vite';
import { viteImportCssSheet } from 'vite-plugin-import-css-sheet';
export default defineConfig({
plugins: [
viteImportCssSheet(),
],
});
For typings to work correctly, in your tsconfig.json file add the following:
tsconfig.json
{
"compilerOptions": {
"types": [
"vite-plugin-import-css-sheet/client"
]
},
}
This adds the correct type to .css file imports.
If you also use vite/client typings, vite-plugin-import-css-sheet/client
must be below it.
Usage
New correct syntax.
import style from './button.css' with { type: 'css' };
Also works with the previous assert syntax.
import style from './button.css' assert { type: 'css' };