https://github.com/takuma-ru/unplugin-lit-sass
SCSS files to be imported as css variables in lit.
https://github.com/takuma-ru/unplugin-lit-sass
css lit lit-element sass scss unplugin
Last synced: 6 months ago
JSON representation
SCSS files to be imported as css variables in lit.
- Host: GitHub
- URL: https://github.com/takuma-ru/unplugin-lit-sass
- Owner: takuma-ru
- License: mpl-2.0
- Created: 2024-06-03T02:39:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-24T05:10:38.000Z (over 1 year ago)
- Last Synced: 2025-08-22T03:38:08.000Z (7 months ago)
- Topics: css, lit, lit-element, sass, scss, unplugin
- Language: TypeScript
- Homepage:
- Size: 86.9 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-lit-sass
## Description
`unplugin` to allow `.scss` files to be imported as css variables in lit.
## Getting Started
### 1. Install
```bash
pnpm add unplugin-lit-sass
```
### 2. Configure
vite
`vite.config.ts`
```ts
import { defineConfig } from "vite";
import { unpluginLitSass } from "unplugin-lit-sass";
export default defineConfig({
plugins: [unpluginLitSass.vite()],
});
```
`src/vite-env.d.ts`
```ts
///
```
## 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
```ts
import styles from "./lit-component-name.scss?litSass";
// or
import { styles } from "./lit-component-name.scss?litSass";
```
### 3. Apply scss
```ts
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
```ts
export type Options = {
/**
* File type to be processed.
*
* @default [".scss", ".sass"]
*/
fileType?: Array<`.${string}` | `?${string}`>;
};
```