sass-loader 13.3.2

The Sass Loader for Webpack, or simply sass-loader, is a package that allows Webpack to compile Sass/SCSS files to CSS. It essentially transforms Sass and SCSS files into standard CSS files that can be understood by the browser. This package enables developers to write styles in the powerful, feature-rich syntax of Sass, while ensuring compatibility with all browsers.

To use sass-loader in your project, first you'll need to install it along with its peer dependencies, webpack and sass. This can be done using npm, yarn, or pnpm.

With npm:

npm install sass-loader sass webpack --save-dev

With yarn:

yarn add -D sass-loader sass webpack

With pnpm:

pnpm add -D sass-loader sass webpack

Next, you'll need to configure webpack to use the sass-loader. This involves adding a rule to your webpack configuration file (usually webpack.config.js) which tells webpack to use sass-loader for .scss and .sass files. Here's an example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

Finally, you can import your Sass/SCSS files into your JavaScript files, and webpack will automatically compile them to CSS when you run your build script. For example:

import "./style.scss";

As for the Sass Loader documentation, it can be found on GitHub at https://github.com/webpack-contrib/sass-loader. Here you can find all the explanation and usage examples for the Sass Loader, including complete instructions for getting started, advanced configuration options, and how to extract CSS into separate files.