sass-loader

(★ 3,892)

Compiles Sass to CSS

Owner Repos

webpack ★ 65,971

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

JavaScript
webpack-bundle-analyzer ★ 12,660

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

JavaScript
webpack-dev-server ★ 7,848

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.

JavaScript
mini-css-extract-plugin ★ 4,663

Lightweight CSS extraction plugin

JavaScript
css-loader ★ 4,320

CSS Loader

JavaScript
tapable ★ 3,862

Just a little module for plugins.

JavaScript

File Explorer

ZIP Download
  • .cspell.json
  • .editorconfig
  • .gitattributes
  • .gitignore
  • .prettierignore
  • babel.config.js
  • CHANGELOG.md
  • eslint.config.js
  • LICENSE
  • lint-staged.config.js
  • package-lock.json
  • package.json
  • README.md
  • tsconfig.json

# Installation Guide

node
Prerequisites

Setup Steps

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

Install sass-loader and required dependencies.

webpack

Run webpack to compile Sass/SCSS files to CSS.

Key Commands

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

Install sass-loader, sass implementation, and webpack for development.

npm test

Run the project test suite.

sass-loader requires either Dart Sass or Sass Embedded to be installed in your project.

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Link
Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

eval

View Details ▼

Execute arguments as a single command in the current shell and return its result.

eval "{{echo foo}}"

Call `echo` with the "foo" argument:

eval "{{foo=bar}}"

Set a variable in the current shell:

🔍

npm install

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

npm

View Details ▼

JavaScript and Node.js package manager.
Manage Node.js projects and their module dependencies.
Some subcommands such as `install`, `run`, etc. have their own usage documentation.

npm init {{[-y|--yes]}}

Create a `package.json` file with default values (omit `--yes` to do it interactively):

npm {{[i|install]}}

Download all the packages listed as dependencies in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

🔍

pnpm

View Details ▼

Fast, disk space efficient package manager for Node.js.
Manage Node.js projects and their module dependencies.

pnpm init

Create a `package.json` file:

pnpm {{[i|install]}}

Download all the packages listed as dependencies in `package.json`:

pnpm add {{module_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

🔍

sass

View Details ▼

Convert SCSS or Sass files to CSS.

sass {{inputfile.scss|inputfile.sass}}

Convert a SCSS or Sass file to CSS and print out the result:

sass {{inputfile.scss|inputfile.sass}} {{outputfile.css}}

Convert a SCSS or Sass file to CSS and save the result to a file:

sass --watch {{inputfile.scss|inputfile.sass}}

Watch a SCSS or Sass file for changes and output or update the CSS file with same filename:

🔍

webpack

View Details ▼

Bundle a web project's js files and other assets into a single output file.

webpack {{app.js}} {{bundle.js}}

Create a single output file from an entry point file:

webpack {{app.js}} {{bundle.js}} --module-bind '{{css=css}}'

Load CSS files too from the JavaScript file (this uses the CSS loader for CSS files):

webpack {{[-c|--config]}} {{webpack.config.js}} --progress

Pass a configuration file (with e.g. the entry script and the output filename) and show compilation progress:

🔍

yarn

View Details ▼

JavaScript and Node.js package manager alternative.

yarn global add {{module_name}}

Install a module globally:

yarn install

Install all dependencies referenced in the `package.json` file (the `install` is optional):

yarn add {{module_name}}@{{version}}

Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):

// repository documentation