0.0.2-beta.0 • Published 1 year ago
unplugin-lit-sass v0.0.2-beta.0
unplugin-lit-sass
Description
unplugin
to allow .scss
files to be imported as css variables in lit.
Getting Started
1. Install
pnpm add unplugin-lit-sass
2. Configure
vite.config.ts
import { defineConfig } from "vite";
import { unpluginLitSass } from "unplugin-lit-sass";
export default defineConfig({
plugins: [unpluginLitSass.vite()],
});
src/vite-env.d.ts
/// <reference types="unplugin-lit-sass/@types" />
Usage
1. Create SCSS file
Create .scss.
e.g.) lit-component-name.scss
.
2. Import SCSS file from Lit component file
!WARNING The path name must end with
?litSass
. Giving this query will run the plugin
import styles from "./lit-component-name.scss?litSass";
// or
import { styles } from "./lit-component-name.scss?litSass";
3. Apply scss
import styles from "./my-element.scss?litSass";
@customElement("my-element")
export class MyElement extends LitElement {
static readonly styles: CSSResultArray = [styles];
// ...
render() {
// ...
}
}
Options
fileType
Description
File type to be processed.
Default
[".scss", ".sass"]
Type
Array<`.${string}` | `?${string}`>
All options
export type Options = {
/**
* File type to be processed.
*
* @default [".scss", ".sass"]
*/
fileType?: Array<`.${string}` | `?${string}`>;
};
0.0.2-beta.0
1 year ago
0.0.1-beta.13
1 year ago
0.0.1-beta.12
1 year ago
0.0.1-beta.11
1 year ago
0.0.1-beta.10
1 year ago
0.0.1-beta.9
1 year ago
0.0.1-beta.8
1 year ago
0.0.1-beta.7
1 year ago
0.0.1-beta.6
1 year ago
0.0.1-beta.5
1 year ago
0.0.1-beta.4
1 year ago
0.0.1-beta.3
1 year ago
0.0.1-beta.2
1 year ago
0.0.1-beta.1
1 year ago
0.0.1-beta.0
1 year ago
1.0.1-beta.0
1 year ago