0.1.3 • Published 9 months ago
vite-plugin-yaml-ts-scss v0.1.3
vite-plugin-yaml-ts-scss
A Vite plugin for importing YAML files as TypeScript objects or SCSS variables.
Installation
pnpm install --save-dev vite-plugin-yaml-ts-scss
Usage
// vite.config.ts
import { defineConfig } from "vite";
import YamlScssPlugin, { preprocessorOptions } from "vite-plugin-yaml-scss";
export default defineConfig({
plugins: [YamlScssPlugin()],
css: {
preprocessorOptions: preprocessorOptions, //You need to add preprocessorOptions
},
});
// variables.yaml
width: 300
height: 400
// main.ts
import size from "./variables.yaml";
console.log(size.width); // 300
console.log(size.height); // 400
// style.scss
@use "./variables.yaml" as size;
.app {
width: size.$width + px;
height: size.$height + px;
}