rollup-plugin-scss-lit

![Latest version
!Dependency status
](https://www.npmjs.com/package/rollup-plugin-scss-lit)

[Rollup] plugin for importing [Sass] sources as constructable stylesheets to projects using [lit] ([lit-html] and [lit-element]) or [fast-element].

Faster than the combination of [rollup-plugin-styles] and [rollup-plugin-lit-css]. Uses the standard [options] of the Sass compiler. Supports minifying by [cssnano] or fully customisable transformations of the CSS output by [PostCSS].

Synopsis

Custom element:

``js
import { LitElement } from 'lit';
import styles from './styles.scss'

class MyElement extends LitElement {
static styles = styles
// the rest of the implementation
}
`

Build configuration:

`js
import { litScss } from 'rollup-plugin-scss-lit'

export default {
plugins: [
litScss({ minify: process.env.NODE_ENV === 'production' })
]
// the rest of the configuration
}
`

Installation

Make sure that you use [Node.js] 14 or newer and [Rollup] 2 or newer. Use your favourite package manager - [NPM], [PNPM] or [Yarn]:

`sh
npm i -D rollup-plugin-scss-lit
pnpm i -D rollup-plugin-scss-lit
yarn add -D rollup-plugin-scss-lit
`

Usage

Create a rollup.config.js [configuration file] and import the plugin:

`js
import { litScss } from 'rollup-plugin-scss-lit'

export default {
input: 'src/index.js',
output: { file: 'dist/main.js', format: 'iife', sourcemap: true },
plugins: [
litScss({
minify: process.env.NODE_ENV === 'production',
options: { loadPaths: ['node_modules'] }
})
]
}
`

Then call rollup either via the [command-line] or [programmatically].

$3

If you are using TypeScript, you may need to create a declaration file to allow TypeScript to import the SCSS files (otherwise you will see error messages like Cannot find module './styles.scss' or its corresponding type declarations.).

Create a file src/styles.d.ts with the following content:

`ts
declare module '*.scss' {
import { CSSResultGroup } from 'lit';
const styles: CSSResultGroup;
export default styles;
}
`

If you have configured typescript to use a different outDir than the default of ./, you will also need to copy your SCSS files into that directory. You can use [rollup-plugin-copy] for this, by adding the following to your Rollup configuration file:

`js
import copy from "rollup-plugin-copy";

export default {
plugins: [
copy({
targets: [{ src: "src/*/.scss", dest: "build" }], // build is configured as outDir in tsconfig.json
flatten: false, // important - preserves folder structure
hook: "buildStart", // important - needs to run before other plugins
}),
// ...
]
}
`

Options

The following options can be passed in an object to the plugin function to change the default values.

$3

Type: Array

Default: ['*/.scss']

[Pattern] to match files which will be processed by the plugin.

$3

Type: Array

Default: []

[Pattern] to match files which will be ignored by the plugin.

$3

Type: Object

Default: undefined

Options for the Sass compiler. Use any [options] supported by the [compileString] method from the Sass package.

$3

Type: Boolean | Object

Default: false

Enables minifying of the compiled CSS output. If an object is specified, it will be passed to the [cssnano] plugin.

Experimental feature: if the object is set to { fast: true }, [esbuild] will be used instead of [postcss].

$3

Type: Array