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

Exhibition

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).

Tybalt

Could you elaborate little more on the style-loader? I noticed that the css-loader embeds css in the bundle.js. What exactly would the style-loader do to that bundle.js if i added it in the loaders? Is it used only when you output an external css file? Also, when you say injects CSS into a style tag, wouldn't the output be HTML or something like that? – Flaxen

@nev.m The css-loader creates a JavaScript string with the CSS and style-loader creates a <style> tag (using document.createElement) with the CSS string as its content and adds it to the DOM. The output from style-loader is pure JavaScript, that creates the DOM node and inserts it when it's executed (hence at runtime). style-loader is only used when you're not extracting the CSS into a separate .css file. – Tybalt

thanks. Does this mean if you use ONLY the css-loader (which creates a JavaScript string with the CSS) and not use style-loader (which adds style tag into DOM) then we're not going to see the css take effect? – Flaxen

@nev.m Yes that is correct, it won't have any effect unless you manually take that CSS and somehow add it to the DOM. – Tybalt

@MichaelJungo How about style-loader vs to-string-loader? – Weekend