SCSS loader with webpack

Question

How do I build my .scss using webpack? I can find less loaders and css loaders but not scss. Is this the same as Sass? I keep getting referenced to Sass but the syntax is different

Solution

This is more a question of SASS syntax vs SCSS syntax.

Directly from the first result on google for such a search:

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

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

The tools support both syntax forms, so you can expect to use the sass-loader with either without any problem.

sass-loader usage with older .sass syntax

If you are using .sass you simply need to pass an option on the query-string when using the sass-loader:

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

sass-loader usage with more common .scss syntax

If you are using .scss, and provided you having configured the loader correctly, everything should just work.

Here is a link to the sass-loader for your reference: https://github.com/jtangelder/sass-loader

Comments

[JoannaFalkowska]

Thanks for this .sass syntax tip, couldn't find it anywhere else. People who thought calling SASS both .sass and .scss files is a good idea should be seriously ashamed of themselves.

[Johannes Ewald]

You don't need to set the option explicitly anymore. The sass-loader derives it automatically for files ending on .sass.