{"id":22236,"library":"rollup-plugin-styles","title":"rollup-plugin-styles","description":"Universal Rollup CSS processing plugin that supports PostCSS, Sass, Less, Stylus, CSS Modules, URL resolving, and assets. v4.0.0 requires Rollup ^2.63.0 and drops Node 12. Ships TypeScript types. Active development as of 2022. Differentiators: supports multiple preprocessors out-of-the-box, CSS Modules without extra config, and multiple modes (inject, extract, emit).","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Anidetrix/rollup-plugin-styles","tags":["javascript","rollup","rollup-plugin","css","css-modules","postcss","sass","scss","less","typescript"],"install":[{"cmd":"npm install rollup-plugin-styles","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-styles","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-styles","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - requires Rollup ^2.63.0","package":"rollup","optional":false}],"imports":[{"note":"ESM-only since v4; CommonJS require will fail.","wrong":"const styles = require('rollup-plugin-styles')","symbol":"default","correct":"import styles from 'rollup-plugin-styles'"},{"note":"Both default and named exports available, but default is the plugin factory.","wrong":"import styles from 'rollup-plugin-styles'","symbol":"styles","correct":"import { styles } from 'rollup-plugin-styles'"},{"note":"Options type is exported for TypeScript projects; avoid runtime import.","wrong":"import { Options } from 'rollup-plugin-styles'","symbol":"type Options","correct":"import type { Options } from 'rollup-plugin-styles'"}],"quickstart":{"code":"// rollup.config.js\nimport styles from 'rollup-plugin-styles';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm',\n    assetFileNames: '[name]-[hash][extname]'\n  },\n  plugins: [\n    styles({\n      mode: 'inject',\n      modules: true,\n      sass: {\n        includePaths: ['node_modules', 'src/styles']\n      }\n    })\n  ]\n};\n\n// src/index.js\nimport style from './styles.scss';\nconsole.log(style); // class names if CSS Modules enabled","lang":"javascript","description":"Basic Rollup configuration with SCSS support and CSS Modules enabled."},"warnings":[{"fix":"Remove `fibers` option; use dart-sass (default).","message":"v4.0.0 dropped support for `sass` package's `fibers` option. Only dart-sass is supported.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade Rollup to ^2.63.0.","message":"v4.0.0 requires Rollup ^2.63.0. Older Rollup versions are incompatible.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade Node to v14.13.1+, v16.0.0+, or later.","message":"v4.0.0 dropped Node 12 support. Minimum Node version is ^14.13.1 || >=16.0.0.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Switch to `import styles from 'rollup-plugin-styles'`.","message":"Using `require('rollup-plugin-styles')` is deprecated. Import is the recommended way.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Use `mode: 'inject'` or `mode: 'extract'` to access class names. For `emit`, use other plugins downstream.","message":"CSS Modules export class names via default export only in `inject` or `extract` mode; in `emit` mode no exports are available.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use `@import '~package/path'` for node_modules imports in Sass/Less.","message":"When using `@import` in Sass/Less, prepend with `~` to resolve from node_modules or it may treat as local file.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Change `const styles = require('rollup-plugin-styles')` to `import styles from 'rollup-plugin-styles'`.","cause":"Using CommonJS require() instead of ESM import.","error":"Error: Must use import to load ES Module: /project/node_modules/rollup-plugin-styles/dist/index.js"},{"fix":"Ensure the plugin is invoked with proper options object: `styles({ modules: true })`.","cause":"Missing or incorrect Rollup configuration referencing plugin options.","error":"TypeError: Cannot read properties of undefined (reading 'modules')"},{"fix":"Remove `fibers` from sass options; use dart-sass with async compilation.","cause":"Using deprecated `fibers` option for Sass synchronization.","error":"Error: The 'sass' option 'fibers' is no longer supported in rollup-plugin-styles v4."},{"fix":"Add `styles()` to plugins array in rollup.config.js.","cause":"Rollup not configured to handle CSS imports or plugin not added.","error":"RollupError: Could not resolve './style.css' from 'src/index.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}