Thursday, September 2, 2021

Css Loader vs Style Loader Vs Sass-Loader

 The sass-loader will resolve the @import statements and include the imported Sass in the resulting CSS, hence the resulting CSS will probably not have any import statements. But the css-loader does not just handle imports. The three loaders you mention, do very different things and they are meant to be used together, although there are other loaders you could use, which would give a similar result.

  1. sass-loader - Transforms Sass to CSS. (Input: Sass, Output: CSS)
  2. css-loader - Transforms CSS to a JavaScript module. (Input: CSS, Output: JavaScript)
  3. style-loader - Injects the CSS, that is exported by the JavaScript module, into a <style> tag at runtime. (Input: JavaScript, Output: JavaScript).

Note: The output of style-loader is only relevant if you are using CSS modules, which passes on the object that maps class names to local identifiers.