{"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,"search_vec":"'-10':30 '-12':29 '/lit-element':20 '18':33 '2':38,42 '2.1.0':26 '2024':28 '3':39,43 '4':44 'altern':83 'api':64 'compilestr':63 'construct':13 'css':54,97 'cssnano':68 'custom':71 'declar':78 'depend':36 'element':23,106 'esbuild':70 'fast':22 'faster':79 'html':19,103 'import':9 'include/exclude':74 'javascript':88 'lit':5,16,18,37,53,94,96,99,102,105 'lit-css':95 'lit-el':104 'lit-html':17,101 'lit-scss':98 'minif':66 'multi':85 'multi-plugin':84 'node':32 'offici':61 'pattern':75 'peer':35 'plugin':3,7,48,52,86,90,93 'postcss':72 'project':24 'releas':27 'replac':45 'rollup':2,6,41,47,51,89,92 'rollup-plugin':91 'rollup-plugin-lit-css':50 'rollup-plugin-scss-lit':1 'rollup-plugin-styl':46 'sass':62 'sass/scss':10 'scss':4,100 'setup':87 'simpler':81 'singl':57 'sourc':11 'step':58 'style':49 'stylesheet':14 'support':31,65 'transform':73 'typescript':77 'use':59 'version':25 'via':67","created_at":"2026-04-27T17:03:59.336536+00:00","updated_at":"2026-04-27T17:03:59.336536+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/prantlf/rollup-plugin-scss-lit","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rollup-plugin-scss-lit","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}