SCSS bootloader with webpack

Question

How can I create mine .scssusing webpack? I can find fewer loaders and css loaders, but not scss. Is it the same as Sass? I keep referring to Sass, but the syntax is different

Answer 1

It is rather a matter of syntax. SASS syntax and SCSS.

Directly from Google’s first result for such a search:

The most commonly used syntax is known as “SCSS” (for “Sassy CSS”) and is a superset of CSS3 syntax. This means that every valid CSS3 stylesheet is also a valid SCSS. SCSS files use the .scss extension. The second, older syntax is known as indented syntax (or simply ".sass").

As for its compatibility with sass-loader in webpack - in the end, the sass loader calls the node-sass library, which itself is built on libsass.

The tools support both forms of syntax, so you can expect to use sass-loader without any problems.

Using sass-loader with old .sass syntax

If you use .sass, you just need to pass the option in the query string when using sass-loader:

loaders: [
  {
    test: /\.sass$/,
    // Passing indentedSyntax query param to node-sass
    loaders: ["style", "css", "sass?indentedSyntax"]
  }
]

sass-loader .scss

.scss , , .

sass-loader: https://github.com/jtangelder/sass-loader