Css Loader vs Style Loader Vs Sass-Loader

Question

I was little confused in differentiating sass-loader and css-loader while using import statement. As per my knowledge css loader resolve import statment(@import) and style-loader works on injecting style dynamically on your page. I am also using sass-loader in my app. So I was confused on sass-loader functionality. Does it also resolve the import statement along with converting sass to css. In that case I don't need css-loader if I am using only sass files on my project because that job will be done by sass-loader. Am I right here?. Could anyone please highlight on this. Any help would be much appreciated

Answer 1

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.

You can't use sass-loader without any loader that transforms CSS to JavaScript, but you could potentially use raw-loader, which just reads in the content of the module as a string, but then you might lose some transformations that the css-loader does (e.g. CSS modules or minification).