@ponday/rollup-plugin-lit-sass
Rollup plugin to import '.sass' or '.scss' files as LitElement css templates on JavaScript / TypeScript.
Installation
npm install --save-dev @ponday/rollup-plugin-lit-sass
Usage
Import and add this plugin to plugins
option.
import litSass from '@ponday/rollup-plugin-lit-sass';
export default {
entry: 'src/input.js',
dest: 'dist/output.js',
plugins: [
litSass()
]
};
Import sass file on JavaScript.
import { LitElement, html, css} from 'lit-element';
// import as a function that type is (params: { css: typeof require('lit-element').css }) => CSSResult
import style from './styles.scss';
export class MyElement extends LitElement {
static styles = style({ css });
// other implementations...
}
If you want to use TypeScript, you might need type declaraiton file for sass/scss.
An example code for SCSS is following:
declare module "*.scss" {
import { css, CSSResult } from 'lit-element';
const scss: (params: { css: typeof css}) => CSSResult;
export default scss;
}
License
MIT