{"id":21152673,"url":"https://github.com/ratmd/rollup-plugin-sass","last_synced_at":"2026-06-30T08:31:53.243Z","repository":{"id":177228311,"uuid":"660110377","full_name":"RatMD/rollup-plugin-sass","owner":"RatMD","description":"A SASS / SCSS rollup plugin, especially designed for the development of our rat packages.","archived":false,"fork":false,"pushed_at":"2023-06-29T14:02:32.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-31T10:34:22.535Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/RatMD.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2023-06-29T09:10:08.000Z","updated_at":"2023-06-29T09:11:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"c885764f-81e7-4d41-9a6b-618227849de3","html_url":"https://github.com/RatMD/rollup-plugin-sass","commit_stats":null,"previous_names":["ratmd/rollup-plugin-sass"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/RatMD/rollup-plugin-sass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RatMD%2Frollup-plugin-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RatMD%2Frollup-plugin-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RatMD%2Frollup-plugin-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RatMD%2Frollup-plugin-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RatMD","download_url":"https://codeload.github.com/RatMD/rollup-plugin-sass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RatMD%2Frollup-plugin-sass/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34959505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-20T10:45:22.662Z","updated_at":"2026-06-30T08:31:53.222Z","avatar_url":"https://github.com/RatMD.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"@rat.md / rollup-plugin-sass - Rollup SASS Extension\n====================================================\nA SASS / SCSS Compiler and Bundler Plugin for [rollup](https://rollupjs.org), especially designed \nfor our own rat and tail products and packages. It supports source maps, relative source map source \nURLs, separate stylesheets for middleware developers and many more neat features.\n\nThis package is inspired by [thgh/rollup-plugin-scss](https://github.com/thgh/rollup-plugin-scss), \nbut is designed especially for package developers, who want to provide multiple stylesheets for \ntheir products and packages.\n\n\nDifferences to [thgh/rollup-plugin-scss](https://github.com/thgh/rollup-plugin-scss) v2 / v3\n----------------------------------------\n\n-   Support for SourceMaps (+ relative SourceMap Source URLs).\n-   Support for separate but also bundled stylesheets.\n-   Uses the Rollup Native assets environment and a bunch of configurations.\n-   Adds a few more options, such as banner and footer.\n-   Requires node.js version 14.13.0 or above.\n-   Written in TypeScript.\n-   Does not support using other SASS libraries (DartSASS is the only supported lib).\n-   Fails on error per default.\n-   Skipping SASS imports must be done with `.skip()` instead of `output: false`.\n\n\nInstallation\n------------\n\n-   **Tested** with Rollup 3.x only\n\nGet the latest version of our Rat SASS Rollup Plugin using npm or yarn:\n\n```\nnpm install --save-dev @rat.md/rollup-plugin-sass\n```\n\n```\nyarn add --dev @rat.md/rollup-plugin-sass\n```\n\n\nUsage\n-----\n\nThe `@rat.md/rollup-plugin-sass` package exports 3 rollup plugins: \n\n-   `.build()`, the main SASS compiler / handler\n-   `.output()`, an additional output plugin handler\n-   `.skip()`, an SASS import skipper / ignore handler\n\nThe `.build()` plugin can only be used in the outer scoped `plugins` configuration object and will \ntake over the whole SASS handling including the output generation / bundling, unless the additional \n`.output()` plugin is available in the inner scoped `output.plugins` configuration set. This allows \nyou to generate different CSS stylesheets on all your defined outputs, ex.: creating a minified and \nunminified stylesheet.\n\nThe additional `.skip()` handler can also only be used in the outer space `plugins` object and \nallows to just strip all respective style-imports.\n\n\n### Usage of .build()\n\nThe `.build()` plugin does the main magic and also generates the desired output directly, unless the \n`.output()` plugin is passed in the inner scoped `output.plugins` rollup definition.\n\n```javascript\nimport rat from '@rat.md/rollup-plugin-sass';\n\nexport default {\n    input: 'src/index.js',\n    output: {\n        file: 'dist/script.js',\n        format: 'cjs'\n    },\n    plugins: [\n        rat.build()\n    ]\n};\n```\n\n\n### Usage of .output()\n\nThe `.output()` plugin allows you to adapt the css compilation per rollup output definition and can \nONLY be used together with `.build()` as outer-scoped plugin.\n\n```javascript\nimport rat from '@rat.md/rollup-plugin-sass';\nimport { terser } from 'rollup-plugin-terser';\n\nexport default {\n    input: 'src/index.js',\n    output: [\n        {\n            file: 'dist/script.js',\n            format: 'cjs',\n            plugins: [\n                rat.output(\n                    /* Provide output-related options */\n                )\n            ]\n        },\n        {\n            file: 'dist/script.min.js',\n            format: 'cjs',\n            plugins: [\n                rat.output(/* Provide output-related options */ {\n                    outputStyle: 'compressed'\n                }),\n                terser()\n            ]\n        }\n    ],\n    plugins: [\n        rat.build(/* Provide Basic options */)\n    ]\n};\n```\n\n\n### Usage of .skip()\n\nThe `.skip()` package will just ignore all stylesheet imports, useful if you need to export multiple \nversions of your JavaScript on multiple rollup definitions, without re-compiling the same \nstylesheets again.\n\n```javascript\nimport rat from '@rat.md/rollup-plugin-sass';\n\nexport default [\n    {\n        input: 'src/index.js',\n        output: {\n            file: 'dist/script.js',\n            format: 'cjs'\n        },\n        plugins: [\n            rat.sass()\n        ]\n    },\n    {\n        input: 'src/index.js',\n        output: {\n            file: 'dist/script.js',\n            format: 'es'\n        },\n        plugins: [\n            rat.skip()\n        ]\n    }\n];\n```\n\n\nConfiguration\n-------------\n\n### banner\n\u003e Available for: `.build()` and `.output()`\u003cbr\u003e\n\u003e Types: `string | (name: string) =\u003e string`\n\nAdds an additional banner on top of your (bundled) stylesheets. You can use either a hardcoded \nstring (don't forget to use the comment syntax) or a function, which receives the current stylesheet \nfilename and which MUST return a string.\n\n\n### bundle\n\u003e Available for: `.build()`\u003cbr\u003e\n\u003e Types: `boolean`\n\nThe **rat.sass** rollup plugin doesn't bundle your stylesheets per default, so each included SASS or \nSCSS file within your JavaScript or TypeScript project will be compiled into an own file. This \noption allows you to force the bundeling of all included stylesheets into one single .css file, \nincluding one single SourceMap too, of course.\n\n\n### exclude\n\u003e Available for: `.build()` and `.skip()`\u003cbr\u003e\n\u003e Types: [`picomatch`](https://github.com/micromatch/picomatch#globbing-features)\n\nRollup filter configuration: A valid [picomatch](https://github.com/micromatch/picomatch#globbing-features) \npattern, or array of patterns. If `options.include` is omitted or has a length of zero, filter will \nreturn true by default. Otherwise, an ID must match one or more of the picomatch patterns, and must \nnot match any of the options.exclude patterns.\n\n\n### fileNames\n\u003e Available for: `.build()`\u003cbr\u003e\n\u003e Types: `string | (name: string, id: string) =\u003e string`\n\nAllows you to overwrite the default used `rollup.assetFileNames` option, which defines where and \nwith which name scheme the stylesheets will be stored / bundled. This option allows you to use the \nfollowing placeholders:\n\n-   `[extname]`: The file extension without leading dot: `css` or `min.css`\n-   `[name]`: The name of the imported stylesheet without any extension\n\nKeep in mind, that this cannot be a relative or absolute path (see [rollup#3507](https://github.com/rollup/rollup/issues/3507)). \nThe according files will be written within the bundled root directory, which is defined by \n`output.dir`. If you're using `output.file` you should consider to switch to `output.dir` with\n`output.entryFileNames` instead which leads to the same result when used correctly.\n\n\n### footer\n\u003e Available for: `.build()` and `.output()`\u003cbr\u003e\n\u003e Types: `string | (name: string) =\u003e string`\n\nAdds an additional footer on the bottom of your (bundled) stylesheets but BEFORE the sourceMapUrl \ncomment. You can use either a hardcoded string (don't forget to use the comment syntax) or a \nfunction, which receives the current stylesheet filename and which MUST return a string.\n\n\n### include\n\u003e Available for: `.build()` and `.skip()`\u003cbr\u003e\n\u003e Types: [`picomatch`](https://github.com/micromatch/picomatch#globbing-features)\n\nRollup filter configuration: A valid [picomatch](https://github.com/micromatch/picomatch#globbing-features) \npattern, or array of patterns. If `options.include` is omitted or has zero length, filter will \nreturn true by default. Otherwise, an ID must match one or more of the picomatch patterns, and must \nnot match any of the options.exclude patterns.\n\n\n### minifiedExtension\n\u003e Available for: `.build()` and `.output()`\u003cbr\u003e\n\u003e Types: `boolean`\n\nTrue will automatically turn `.css` extensions into `.min.css` if the `outputStyle` option is set \nto `compressed`, which is really helpful for bundle generations on 2-styled outputs.\n\n\n### prefix\n\u003e Available for: `.build()` and `.output()`\u003cbr\u003e\n\u003e Types: `string | (name: string) =\u003e string`\n\nAdds additional SASS / SCSS / CSS content to each stylesheet, before they get compiled. Very useful \nto add some variables or mixins. You can use either a hardcoded string or a function, which receives \nthe current stylesheet filename and which MUST return the prefix content as string.\n\n\n### preprocess\n\u003e   Available for: `.build()` and `.output()`\u003cbr\u003e\n\u003e   Types: `(file: OutputAsset, config: RatSassOutputConfig, options: OutputOptions, bundle: OutputBundle) =\u003e OutputAsset`\n\nAdds a hook on the top of the main `generateBundle` method, which allows you to modify the output \nasset.\n\n\n### postprocess\n\u003e   Available for: `.build()` and `.output()`\u003cbr\u003e\n\u003e   Types: `(file: OutputAsset, config: RatSassOutputConfig, options: OutputOptions, bundle: OutputBundle) =\u003e OutputAsset`\n\nAdds a hook on the bottom of the main `generateBundle` method, which allows you to modify the output \nasset.\n\n\n### sourceMapUrls\n\u003e Available for: `.build()` and `.output()`\u003cbr\u003e\n\u003e Types: `boolean | string | (url: string) =\u003e string`\n\nAllows you to turn the absolute paths, generated by the DartSASS sourcemap generator, into relative \nones. You can either pass `true`, which will autodetect a relative path considering the sourceMapRoot \noption if passed, `false` to keep the absolute paths, a fixed string which will be used to replace \nthe absolute part of the URL with the relative one or a function, which receives the absolute URLs \nand should return the relative ones as string. \n\nUsing `true` will also replace the inital `stdin` (used for the main imported stylesheet files) with \nthe stylesheet relative path itself. Beware, that your callback function will receive the `stdin` \ninput as well.\n\n\n### watch\n\u003e Available for: `.build()`\u003cbr\u003e\n\u003e Types: `string | string[]`\n\nYou can pass a single or multiple file or directory paths to be monitored in watch mode, which \ntriggers the rollup build function on each change of these files.\n\n\n### SASS Configuration\n\u003e Available for: `.build()` and `.output()`\n\nThe following SASS options are available on the latest published version, keep in mind that \n**rat.sass** uses **DartSass** and is not compatible nor configurable for the NodeSass, LibSass or \nRubySass packages.\n\n\n#### includePaths\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#includepaths) for more \ninformation.\n\n\n#### indentedSyntax\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#indentedsyntax) for \nmore information.\n\n\n#### indentType\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#indenttype) for more \ninformation.\n\n\n#### indentWidth\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#indentwidth) for more \ninformation.\n\n\n#### linefeed\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#linefeed) for more \ninformation.\n\n\n#### omitSourceMapUrl\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#omitsourcemapurl) for \nmore information.\n\n\n#### outFile\n\nThis option should be avoided whenever possible, since **rat.sass** pushes this option based on the used \nrollup configuration. Check out the [related SASS Docs](https://sass-lang.com/documentation/js-api#outfile) \nfor more information.\n\n\n#### outputStyle\n\nThe default value for this option is based on the [`output.compact`](https://rollupjs.org/guide/en/#outputcompact) \nrollup configuration. Check out the [related SASS Docs](https://sass-lang.com/documentation/js-api#outputstyle) \nfor more information.\n\n\n#### sourceComments\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#sourcecomments) for \nmore information.\n\n\n#### sourceMap\n\nThe default value for this option is based on the [`output.sourcemap`](https://rollupjs.org/guide/en/#outputsourcemap) \nrollup configuration. Check out the [related SASS Docs](https://sass-lang.com/documentation/js-api#sourcemap) \nfor more information.\n\n\n#### sourceMapContents\n\nThe default value for this option is based on the [`output.sourcemapExcludeSources`](https://rollupjs.org/guide/en/#outputsourcemapexcludesources) \nrollup configuration. Check out the [related SASS Docs](https://sass-lang.com/documentation/js-api#sourcemapcontents) \nfor more information.\n\n\n#### sourceMapEmbed\n\nThe default value for this option is based on the [`output.sourcemap`](https://rollupjs.org/guide/en/#outputsourcemap) \nrollup configuration. Check out the [related SASS Docs](https://sass-lang.com/documentation/js-api#sourcemapembed) for \nmore information.\n\n\n#### sourceMapRoot\n\nCheck out the [related SASS Docs](https://sass-lang.com/documentation/js-api#sourcemaproot) for more \ninformation.\n\n\nCopyright \u0026 License\n-------------------\nWritten by SamBrishes \\\u003csam@rat.md\\\u003e - [rat.md](https://www.rat.md).\n\n\u003e Published under the MIT license\u003cbr /\u003e\n\u003e Copyright \u0026copy; 2021 - 2023 rat.md \\\u003cinfo@rat.md\\\u003e.\u003cbr /\u003e\n\u003e Copyright \u0026copy; 2020 - 2021 pytesNET \\\u003cinfo@pytes.net\\\u003e.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fratmd%2Frollup-plugin-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fratmd%2Frollup-plugin-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fratmd%2Frollup-plugin-sass/lists"}