vite-plugin-sass-dts ⚡ Welcome 😀
vite-plugin-sass-dts
A plugin that automatically creates a type file when using the CSS module type-safely.
Demo
Install
npm i -D vite-plugin-sass-dtsOptions
| Parameter | Type | Description |
|---|---|---|
| allGenerate | boolean | Create all d.ts files of the css, sass, scss files included in the project at build time. We recommend that you turn off the flag once you have created the d.ts file, as it will take a long time to build. |
| global.generate | boolean | Outputs the common style set in additionalData of preprocessorOptions as a global type definition file. |
| global.outFile | string | Specify the file that outputs the global common style with an absolute path.Relative paths will be supported. |
Add it to vite.config.ts
import { defineConfig } from 'vite'
import sassDts from 'vite-plugin-sass-dts'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [sassDts()],
})Usage
You can create a dts file by saving the scss file during development. You can check the usage example when the following options are set. Prepare the vite.config.ts file with the following options and start it in development mode.
;[vite.config.ts]
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import sassDts from 'vite-plugin-sass-dts'
import path from 'path'
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer(...args) {
if (args[0] !== '@/styles') {
return
}
return {
file: `${path.resolve(__dirname, './src/assets/styles')}`,
}
},
},
},
},
plugins: [
react(),
sassDts({
allGenerate: true,
global: {
generate: true,
outFile: path.resolve(__dirname, './src/style.d.ts'),
},
}),
],
})npm run devThen save the following file ...
[src/assets/styles/_index.scss] .row {
display: flex;
}[src/App.module.scss] .header-1 {
background-color: common.$primary;
&.active {
background-color: black;
}
}Saving the scss file creates a d.ts file in the same hierarchy.
;[src / App.scss.d.ts]
import globalClassNames, { ClassNames as GlobalClassNames } from './style.d'
declare const classNames: typeof globalClassNames & {
readonly 'header-1': 'header-1'
readonly active: 'active'
}
export default classNames
export type ClassNames = 'header-1' | 'active' | GlobalClassNamesThe type definition is output to the output path of the common style specified in the option.
;[src / style.d.ts]
declare const classNames: {
readonly row: 'row'
}
export default classNames
export type ClassNames = 'row'Principles of conduct
Please see the principles of conduct when building a site.
License
This library is licensed under the MIT license.