{"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,"search_vec":"'12':29 '2.63.0':25 '2022':37 'activ':33 'asset':21 'box':46 'config':51 'css':7,16,47,63,65 'css-modul':64 'develop':34 'differenti':38 'drop':27 'emit':57 'extra':50 'extract':56 'inject':55 'javascript':58 'less':14,70 'mode':54 'modul':17,48,66 'multipl':40,53 'node':28 'out-of-the-box':42 'plugin':3,9,62 'postcss':12,67 'preprocessor':41 'process':8 'requir':23 'resolv':19 'rollup':2,6,24,59,61 'rollup-plugin':60 'rollup-plugin-styl':1 'sass':13,68 'scss':69 'ship':30 'style':4 'stylus':15 'support':11,39 'type':32 'typescript':31,71 'univers':5 'url':18 'v4.0.0':22 'without':49","created_at":"2026-04-27T17:04:06.593394+00:00","updated_at":"2026-04-27T17:04:06.593394+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Anidetrix/rollup-plugin-styles","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rollup-plugin-styles","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"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}}