{"id":13774010,"url":"https://github.com/thgh/rollup-plugin-scss","last_synced_at":"2025-05-15T11:02:12.200Z","repository":{"id":11479366,"uuid":"69798837","full_name":"thgh/rollup-plugin-scss","owner":"thgh","description":"Rollup and compile multiple .scss, .sass and .css imports","archived":false,"fork":false,"pushed_at":"2024-12-16T03:52:24.000Z","size":369,"stargazers_count":135,"open_issues_count":32,"forks_count":48,"subscribers_count":2,"default_branch":"v4","last_synced_at":"2025-05-06T13:48:42.588Z","etag":null,"topics":["rollup"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thgh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-10-02T13:33:15.000Z","updated_at":"2025-04-22T08:09:41.000Z","dependencies_parsed_at":"2024-01-13T11:57:36.706Z","dependency_job_id":"8fb16c82-82ac-4fc7-bda9-8f84a4c8bbfe","html_url":"https://github.com/thgh/rollup-plugin-scss","commit_stats":{"total_commits":101,"total_committers":20,"mean_commits":5.05,"dds":0.4752475247524752,"last_synced_commit":"dd41d2d7a4ce924a0f57e7e59cf9c7b0edd9e146"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thgh%2Frollup-plugin-scss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thgh%2Frollup-plugin-scss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thgh%2Frollup-plugin-scss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thgh%2Frollup-plugin-scss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thgh","download_url":"https://codeload.github.com/thgh/rollup-plugin-scss/tar.gz/refs/heads/v4","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rollup"],"created_at":"2024-08-03T17:01:22.849Z","updated_at":"2025-05-15T11:02:12.103Z","avatar_url":"https://github.com/thgh.png","language":"TypeScript","readme":"# Rollup multiple .scss, .sass and .css imports\n\n\u003ca href=\"LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg\" alt=\"Software License\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/thgh/rollup-plugin-scss/issues\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/thgh/rollup-plugin-scss.svg\" alt=\"Issues\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"http://standardjs.com/\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg\" alt=\"JavaScript Style Guide\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://npmjs.org/package/rollup-plugin-scss\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/rollup-plugin-scss.svg?style=flat-squar\" alt=\"NPM\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/thgh/rollup-plugin-scss/releases\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/release/thgh/rollup-plugin-scss.svg\" alt=\"Latest Version\" /\u003e\n\u003c/a\u003e\n\n## Installation\n\n```\nnpm install --save-dev rollup-plugin-scss sass\n```\n\nIf any of them is installed, it will be used automatically, if both installed `sass` will be used.\n\n## Usage\n\n```js\n// rollup.config.js\nimport scss from 'rollup-plugin-scss'\n\nexport default {\n  input: 'input.js',\n  output: {\n    file: 'output.js',\n    format: 'esm',\n    // Removes the hash from the asset filename\n    assetFileNames: '[name][extname]'\n  },\n  plugins: [\n    scss() // will output compiled styles to output.css\n  ]\n}\n\n// OR\n\nexport default {\n  input: 'input.js',\n  output: { file: 'output.js', format: 'esm' },\n  plugins: [\n    scss({ fileName: 'bundle.css' }) // will output compiled styles to \"bundle.css\"\n  ]\n}\n\n// OR\n\nexport default {\n  input: 'input.js',\n  output: { file: 'output.js', format: 'esm' },\n  plugins: [\n    scss() // will output compiled styles to \"assets/output-123hash.css\"\n  ]\n}\n```\n\n```js\n// entry.js\nimport './reset.scss'\n```\n\n### Options\n\nOptions are passed to the sass compiler ([node-sass] by default). Refer to [ the Sass docs](https://sass-lang.com/documentation/js-api#options) for more details on these options. \u003cbr/\u003e\nOne notable option is `indentedSyntax` which you'll need if you're parsing Sass syntax instead of Scss syntax. (e.g. when extracting a Vue `\u003cstyle lang=\"sass\"\u003e` tag) \u003cbr/\u003e\nBy default the plugin will base the filename for the css on the bundle destination.\n\n```js\nscss({\n  // Defaults to output.css, Rollup may add a hash to this!\n  name: 'output.css',\n\n  // Literal asset filename, bypasses the automated filenaming transformations\n  fileName: 'output.css',\n\n  // Callback that will be called ongenerate with two arguments:\n  // - styles: the contents of all style tags combined: 'body { color: green }'\n  // - styleNodes: an array of style objects: { filename: 'body { ... }' }\n  output: function (styles, styleNodes) {\n    writeFileSync('bundle.css', styles)\n  },\n\n  // Disable any style output or callbacks, import as string\n  output: false,\n\n  // Enables/disables generation of source map (default: false)\n  sourceMap: true,\n\n  // Choose files to include in processing (default: ['/**/*.css', '/**/*.scss', '/**/*.sass'])\n  include: [],\n\n  // Choose files to exclude from processing (default: undefined)\n  exclude: [],\n\n  // Determine if node process should be terminated on error (default: false)\n  failOnError: true,\n\n  // Prefix global scss. Useful for variables and mixins.\n  prefix: `@import \"./fonts.scss\";`,\n\n  // A Sass (sass compatible) compiler to use\n  // - sass and node-sass packages are picked up automatically\n  // - you can use this option to specify custom package (e.g. a fork of one of them)\n  sass: require('node-sass'),\n\n  // Run postcss processor before output\n  processor: () =\u003e postcss([autoprefixer({ overrideBrowserslist: 'Edge 18' })]),\n\n  // Process resulting CSS\n  processor: (css, map) =\u003e ({\n    css: css.replace('/*date*/', '/* ' + new Date().toJSON() + ' */'),\n    map\n  }),\n\n  // or, just string (for backward compatiblity with v2 or simplicity)\n  processor: css =\u003e\n    css.replace('/*date*/', '/* ' + new Date().toJSON() + ' */'),\n\n  // Log filename and size of generated CSS files (default: true)\n  verbose: true\n\n  // Add file/folder to be monitored in watch mode so that changes to these files will trigger rebuilds.\n  // Do not choose a directory where rollup output or dest is pointed to as this will cause an infinite loop\n  watch: 'src/styles/components',\n  watch: ['src/styles/components', 'src/multiple/folders']\n\n  // Any other options are passed to the sass compiler\n  includePaths: ...\n})\n```\n\n## Examples\n\nUsing postcss + autoprefixer + includePaths (sass option)\n\n```js\nimport scss from 'rollup-plugin-scss'\nimport postcss from 'postcss'\nimport autoprefixer from 'autoprefixer'\n\nexport default {\n  input: 'input.js',\n  output: {\n    file: 'output.js',\n    format: 'esm'\n  },\n  plugins: [\n    scss({\n      processor: () =\u003e postcss([autoprefixer()]),\n      includePaths: [\n        path.join(__dirname, '../../node_modules/'),\n        'node_modules/'\n      ]\n    })\n  ]\n}\n```\n\nMinify CSS output:\n\n```js\nscss({\n  outputStyle: 'compressed'\n})\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nContributions and feedback are very welcome. New features should include a test.\n\nTo get it running:\n\n1. Clone the project.\n2. `npm install`\n\n## Credits\n\n- [Thomas Ghysels](https://github.com/thgh)\n- [All Contributors][link-contributors]\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n\n[link-author]: https://github.com/thgh\n[link-contributors]: ../../contributors\n[rollup-plugin-vue]: https://www.npmjs.com/package/rollup-plugin-vue\n[rollup-plugin-buble]: https://www.npmjs.com/package/rollup-plugin-buble\n[rollup-plugin-babel]: https://www.npmjs.com/package/rollup-plugin-babel\n[node-sass]: https://www.npmjs.com/package/node-sass\n[sass]: https://www.npmjs.com/package/sass\n","funding_links":[],"categories":["Plugins"],"sub_categories":["CSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthgh%2Frollup-plugin-scss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthgh%2Frollup-plugin-scss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthgh%2Frollup-plugin-scss/lists"}