{"id":14976334,"url":"https://github.com/yibn2008/fast-sass-loader","last_synced_at":"2025-05-16T18:06:32.024Z","repository":{"id":10548777,"uuid":"66135427","full_name":"yibn2008/fast-sass-loader","owner":"yibn2008","description":"High performance sass loader for webpack","archived":false,"fork":false,"pushed_at":"2021-11-18T15:30:49.000Z","size":811,"stargazers_count":251,"open_issues_count":7,"forks_count":38,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-12T16:55:51.968Z","etag":null,"topics":["high-performance","sass-loader","url-resolve","webpack","webpack2"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yibn2008.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-20T07:53:34.000Z","updated_at":"2024-12-29T00:40:02.000Z","dependencies_parsed_at":"2022-07-21T01:02:20.881Z","dependency_job_id":null,"html_url":"https://github.com/yibn2008/fast-sass-loader","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibn2008%2Ffast-sass-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibn2008%2Ffast-sass-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibn2008%2Ffast-sass-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yibn2008%2Ffast-sass-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yibn2008","download_url":"https://codeload.github.com/yibn2008/fast-sass-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254097106,"owners_count":22014155,"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":["high-performance","sass-loader","url-resolve","webpack","webpack2"],"created_at":"2024-09-24T13:53:44.411Z","updated_at":"2025-05-16T18:06:32.002Z","avatar_url":"https://github.com/yibn2008.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fast-sass-loader\n\n[![Node.js CI](https://github.com/yibn2008/fast-sass-loader/actions/workflows/node.js.yml/badge.svg)](https://github.com/yibn2008/fast-sass-loader/actions/workflows/node.js.yml)\n\nBlazingly fast sass loader for webpack.\n\n*Tips: using with [fast-css-loader](https://github.com/yibn2008/fast-css-loader) you will get more than 10 times css build performance*\n\nFeatures:\n\n- 5~10 times faster than `sass-loader` in large sass project\n- support sass file dedupe, never worry about `@import` same file in different place\n- support url resolve, never worry about the problem with `url(...)` (see https://github.com/webpack-contrib/sass-loader#problems-with-url)\n\nfast sass loader for webpack. 5~10 times faster than **sass-loader**, and support url resolve.\n\n## version 2.x notes\n\nSince libsass has been deprecated, fast-sass-loader will use sass instead of node-sass, you can use `options.implement` to specify any compatible sass compiler.\n\n## vs `sass-loader`\n\n| Features      | fast-sass-loader | sass-loader                             |\n|---------------|------------------|-----------------------------------------|\n| Performance   | Fast (5~10 times)| Slow                                    |\n| Sass Dedupe   | ✓                | ×                                       |\n| Url Resolve   | ✓                | × (need resolve-url-loader, it's buggy) |\n| Loader Config | ×                | ✓                                       |\n| Source Map    | ×                | ✓                                       |\n| Internal Cache| ✓                | ×                                       |\n\n## Performance\n\nperformance benchmark (run `npm run perf`):\n\n![image](https://user-images.githubusercontent.com/4136679/39662788-e99dfa2c-5099-11e8-8e95-d09b68df437c.png)\n\nSince the `sass-loader` doesn't dedupe repeated sass files, the result will be very very large (6.95MB!!!), and the total compile time takes 64.9 seconds (nearly 6 times longer than `fast-sass-loader`).\n\n### Why `fast-sass-loader` is faster than `sass-loader` ?\n\n1. Support sass file dedupe, so `node-sass` won't compile same file repeatedly, the performance improvement is s ignificant when your sass files number grows very large.\n2. Before node-sass compile, `fast-sass-loader` will merge all sass files into a single file, so node-sass only need to compile one large file, it's faster than `@importer` of [libsass](https://github.com/sass/libsass).\n3. The internal cache will store all result for every entry, only compile sass when related file changed.\n\n## Install\n\ninstall by npm:\n\n```javascript\nnpm install fast-sass-loader --save-dev\n```\n\nand you need install **node-sass** and **webpack** as peer dependencies.\n\n## Configuration\n\n### webpack 2, 3 and 4:\n\n```\n{\n  module: {\n    rules: [\n      {\n        test: /\\.(scss|sass)$/,\n        use: [\n          'css-loader',\n          {\n            loader: 'fast-sass-loader',\n            options: {\n              includePaths: [ ... ]\n            }\n          }\n        ]\n      },\n      // other loaders ...\n    ]\n  }\n}\n```\n\n### webpack 1:\n\n```\n{\n  module: {\n    loaders: [\n      {\n        test: /\\.(scss|sass)$/,\n        loader: 'css!fast-sass'\n      },\n      // other loaders ...\n    ]\n  }\n}\n```\n\n## Options\n\n### implementation\n\nsince version 2.x, fast-sass-loader use dart-sass (npm `sass`) instead of original node-sass, if you want use node-sass please use this options to modify.\n\n```js\n{\n  loader: 'fast-sass-loader',\n  options: {\n    implementation: require('node-sass')\n  }\n}\n```\n\n### includePaths:\n\nAn array of paths that [node-sass](https://github.com/sass/node-sass) can look in to attempt to resolve your @import declarations. When using data, it is recommended that you use this.\n\n### data:\nIf you want to prepend Sass code before the actual entry file, you can set the data option. In this case, the loader will not override the data option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:\n\n```javascript\n{\n    loader: \"fast-sass-loader\",\n    options: {\n        data: \"$env: \" + process.env.NODE_ENV + \";\"\n    }\n}\n```\n\nPlease note: Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this.\n\n### transformers:\nIf you want to import files that aren't basic Sass or css files, you can use the transformers option. This option takes an array of transformer entries, each with a list of file extensions and a tranform function. If an imported file's extension matches one of the transformers' extensions, the file contents will be passed to the corresponding transform function. Your transform function should return a sass string that will be directly written into your compiled Sass file. This is especially useful if you use .json files to share your basic styles across platforms and you'd like to import your .json files directly into your Sass.\n```javascript\n{\n    loader: \"fast-sass-loader\",\n    options: {\n        transformers: [\n            {\n                extensions: [\".json\"],\n                transform: function(rawFile) {\n                    return jsonToSass(rawFile);\n                }\n            }\n        ]\n    }\n}\n```\n\n### outputStyle:\nThe outputStyle option is passed to the render method of node-sass. See [node-sass OutputStyle](https://github.com/sass/node-sass/blob/master/README.md#outputstyle). This can be used to create smaller css files if set to \"compressed\".\n\n### resolveURLs:\nBy default `fast-sass-loader` resolves and rewrites paths inside `url()`. This behavior can be turned off with `resolveURLs: false` option so all URLs will remain intact.\n\n## Warning\n\n### Mixing import `.scss` and`.sass` file is not allowed\n\nSince `fast-sass-loader` will parse `@import` and merge all files into single sass file, you cannot import `.scss` file from `.sass` (or opposite).\n\nFor example:\n\n```scss\n// file: entry.scss\n@import \"path/to/file.sass\";  // cannot import `path/to/file.sass` in a `.scss` file\n\nbody {\n  background: #FFF;\n}\n```\n\n### Avoid same variable name in different sass files\n\nSince `fast-sass-loader` will dedupe sass file, later imported file will be ignored. Using same variable name in different sass fill would produce unexpected output.\n\nFor example (compile `entry.scss` with fast-sass-loader):\n\n```sass\n// a.scss\n$foobar: #000;\n```\n\n```sass\n// b.scss\n@import \"a.scss\";\n$foobar: #AAA;\n\nh1 { color: $foobar; }\n```\n\n```sass\n// entry.scss\n@import \"b.scss\";\n@import \"a.scss\"; // this file will be ignore: $foobar === #AAA\n\nh2 { color: $foobar; }\n\n// will output:\n// h1 { color: #AAA; }\n// h2 { color: #AAA; }\n```\n\nYou can use variable prefix to bypass.\n\n### Avoid nested @import in sass rules\n\nfast-sass-loader doesn't support `@import` statement in sass rules, for example:\n\n```sass\n.a {\n  @import 'group'\n}\n\n.b {\n  @import 'group'\n}\n```\n\nyou should wrap the rules that you want to import with mixin, then include them in your `.a { ... }` or `.b { ... }`\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyibn2008%2Ffast-sass-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyibn2008%2Ffast-sass-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyibn2008%2Ffast-sass-loader/lists"}