# webpack/sass-loader

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/webpack-sass-loader).**

3,896 stars · 422 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/webpack/sass-loader
- awesome-repositories: https://awesome-repositories.com/repository/webpack-sass-loader.md

## Topics

`dart-sass` `loader` `node-sass` `sass` `scss` `webpack` `webpack-loader`

## Description

This project is a Webpack loader that transforms Sass source code into standard CSS stylesheets. It serves as an integration layer and module resolver, connecting Sass compilation processes to a JavaScript-based module bundling pipeline.

The tool provides a mechanism for selecting different Sass compiler implementations and supports the injection of global data or variables before the entry file is processed. It also allows for the use of custom importers to extend how files are located and resolved during compilation.

The system manages dependency resolution for imports and the generation of source maps to link compiled CSS back to original source files. It further handles the translation of preprocessor warnings into build-system alerts and optimizes performance by reusing a long-running compiler process across multiple files.

## Tags

### Development Tools & Productivity

- [Webpack Loaders](https://awesome-repositories.com/f/development-tools-productivity/asset-compilation-pipelines/webpack-loaders.md) — Acts as a Webpack loader that transforms Sass files into modules during the bundling process.
- [Sass Compilers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers.md) — Transforms Sass source code into standard CSS stylesheets during the build process.
- [Dependency Resolution](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/dependency-resolution.md) — Resolves complex import paths and module dependencies to correctly link stylesheets across the project.
- [Package Import Resolvers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/package-import-resolvers.md) — Locates imported Sass files and maps @import and @use rules to project dependencies.
- [CSS Source Map Generation](https://awesome-repositories.com/f/development-tools-productivity/css-source-map-generation.md) — Generates source maps that link compiled CSS back to the original Sass source coordinates for debugging.
- [Compiler Abstractions](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/compiler-abstractions.md) — Implements an abstraction layer that allows switching between different Sass compilation engines.
- [Compiler Selection](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/compiler-selection.md) — Allows choosing between different Sass compiler implementations to optimize build speed and efficiency. ([source](https://github.com/webpack/sass-loader/blob/main/README.md))
- [Global Data Injection](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/global-data-injection.md) — Enables the injection of global variables and mixins into Sass files before compilation.
- [Custom Importers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/sass-pipeline-hooks/custom-importers.md) — Supports extending the Sass compilation process with custom import logic that interacts with the loader context. ([source](https://github.com/webpack/sass-loader/blob/main/CHANGELOG.md))
- [Custom Importer Interfaces](https://awesome-repositories.com/f/development-tools-productivity/import-path-resolvers/custom-importer-interfaces.md) — Provides programmable interfaces to resolve Sass import paths using the build system's resolution logic.

### Part of an Awesome List

- [Module Mapping](https://awesome-repositories.com/f/awesome-lists/devtools/sass-libraries/module-mapping.md) — Maps Sass @import and @use rules to specific files located within the project dependencies. ([source](https://github.com/webpack/sass-loader/blob/main/README.md))
- [Persistent Compiler Processes](https://awesome-repositories.com/f/awesome-lists/devtools/build-and-compilation/compilation-performance-optimization/persistent-compiler-processes.md) — Reduces build times by reusing a single long-running compiler process across multiple files. ([source](https://github.com/webpack/sass-loader/blob/main/CHANGELOG.md))

### Programming Languages & Runtimes

- [Import Path Resolution](https://awesome-repositories.com/f/programming-languages-runtimes/module-path-resolution/import-path-resolution.md) — Integrates a module resolution engine to locate imported Sass modules and map them to the correct filesystem locations. ([source](https://github.com/webpack/sass-loader#readme))

### User Interface & Experience

- [CSS Preprocessors](https://awesome-repositories.com/f/user-interface-experience/css-preprocessors.md) — Integrates Sass preprocessor compilation into a JavaScript-based module bundling pipeline.

### Software Engineering & Architecture

- [Compiler Process Persistence](https://awesome-repositories.com/f/software-engineering-architecture/long-running-process-compatibility-analysis/compiler-process-persistence.md) — Reuses a single compiler process across multiple files to eliminate startup overhead and improve build speed.

### Web Development

- [Frontend Asset Optimization](https://awesome-repositories.com/f/web-development/frontend-asset-optimization.md) — Optimizes the frontend asset pipeline by managing compilers and generating debug maps.