{"id":22214,"library":"rollup-plugin-scss-lit","title":"rollup-plugin-scss-lit","description":"Rollup plugin that imports Sass/SCSS sources as constructable stylesheets for Lit (lit-html/lit-element) and FAST Element projects. Version 2.1.0, released 2024-12-10, supports Node >=18 and peer dependencies lit ^2||^3 and rollup ^2||^3||^4. Replaces rollup-plugin-styles + rollup-plugin-lit-css with a single step. Uses the official Sass compileString API, supports minification via cssnano or esbuild, custom PostCSS transforms, include/exclude patterns, and TypeScript declarations. Faster and simpler than alternative multi-plugin setups.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/prantlf/rollup-plugin-scss-lit","tags":["javascript","rollup","plugin","rollup-plugin","lit","lit-css","lit-scss","lit-html","lit-element"],"install":[{"cmd":"npm install rollup-plugin-scss-lit","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-scss-lit","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-scss-lit","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency – provides CSSResult and CSSResultGroup types for constructable stylesheets.","package":"lit","optional":false},{"reason":"Peer dependency – required to function as a Rollup plugin.","package":"rollup","optional":false},{"reason":"Used under the hood for compiling SCSS to CSS.","package":"sass","optional":false}],"imports":[{"note":"The plugin exports a named function `litScss`, not a default export.","wrong":"import litScss from 'rollup-plugin-scss-lit'","symbol":"litScss","correct":"import { litScss } from 'rollup-plugin-scss-lit'"},{"note":"TypeScript declaration must use CSSResultGroup from 'lit', not a plain string type.","wrong":"declare module '*.scss' { const content: string; export default content; }","symbol":"default export (type declaration)","correct":"declare module '*.scss' { import { CSSResultGroup } from 'lit'; const styles: CSSResultGroup; export default styles; }"},{"note":"The official Lit type for static styles arrays is CSSResultGroup, not CSSResult (though CSSResult is assignable).","wrong":"import { CSSResult } from 'lit'","symbol":"CSSResultGroup","correct":"import { CSSResultGroup } from 'lit'"}],"quickstart":{"code":"// rollup.config.js\nimport { litScss } from 'rollup-plugin-scss-lit';\n\nexport default {\n  input: 'src/index.js',\n  output: { file: 'dist/bundle.js', format: 'esm' },\n  plugins: [\n    litScss({\n      include: ['**/*.scss'],\n      exclude: ['node_modules/**'],\n      options: { loadPaths: ['node_modules'] },\n      minify: process.env.NODE_ENV === 'production',\n      plugins: [] // optional PostCSS plugins\n    })\n  ]\n};\n\n// src/my-element.js\nimport { LitElement } from 'lit';\nimport styles from './my-styles.scss';\n\nclass MyElement extends LitElement {\n  static styles = styles;\n  render() {\n    return html`<div>Hello</div>`;\n  }\n}\ncustomElements.define('my-element', MyElement);","lang":"javascript","description":"Shows Rollup config with litScss plugin and a LitElement component importing a SCSS file as static styles."},"warnings":[{"fix":"Upgrade Node.js to >=18.","message":"Minimum Node.js version is 18 since v2.0.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update to v2.0.1+ for Lit 3 and Rollup 4 support.","message":"Peer dependency changes: lit ^2 || ^3, rollup ^2 || ^3 || ^4 in v2.0.1+. Older versions may not support Rollup 4 or Lit 3.","severity":"breaking","affected_versions":"<2.0.1"},{"fix":"Use plain minify: true with cssnano, or configure PostCSS plugins explicitly.","message":"The undocumented 'fast' option in minify object (e.g., { fast: true }) uses esbuild for minification; this is experimental and currently not recommended.","severity":"deprecated","affected_versions":">=1.1.0"},{"fix":"Create src/styles.d.ts declaring module '*.scss' with default export of type CSSResultGroup from 'lit'.","message":"TypeScript requires a module declaration for *.scss imports; otherwise you get 'Cannot find module' errors.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Check Sass compileString documentation for valid options. Avoid importer or syntax options meant for legacy API.","message":"Plugin uses compileString from Sass; options are passed directly to it. Unsupported Sass options may break silently.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Add a copy plugin in rollup.config.js that copies src/**/*.scss to the outDir before other plugins run.","message":"When using TypeScript with a custom outDir, SCSS files must be copied to that directory (e.g., using rollup-plugin-copy with hook 'buildStart').","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Create src/styles.d.ts: declare module '*.scss' { import { CSSResultGroup } from 'lit'; const styles: CSSResultGroup; export default styles; }","cause":"TypeScript cannot resolve SCSS imports without a module declaration.","error":"Cannot find module './styles.scss' or its corresponding type declarations."},{"fix":"Ensure rollup-plugin-scss-lit is installed (npm i -D rollup-plugin-scss-lit) and added to plugins: [litScss()] in rollup.config.js.","cause":"Plugin may not be installed or not added to plugins array.","error":"Error: Could not resolve entry module (src/index.js) or similar Rollup errors."},{"fix":"Use import { litScss } from 'rollup-plugin-scss-lit' (curly braces).","cause":"Attempted default import instead of named import.","error":"TypeError: Cannot destructure property 'litScss' of ... as it is undefined."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}