9

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

Bharat Sewani
  • 418
  • 2
  • 7
  • 16

1 Answers1

20

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

Michael Jungo
  • 25,186
  • 3
  • 62
  • 71
  • 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? – noi.m Aug 13 '17 at 17:43
  • 2
    @nev.m The `css-loader` creates a JavaScript string with the CSS and `style-loader` creates a ` – Michael Jungo Aug 13 '17 at 18:13
  • 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? – noi.m Aug 13 '17 at 19:57
  • 1
    @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. – Michael Jungo Aug 13 '17 at 20:06
  • @MichaelJungo How about style-loader vs to-string-loader? – Lee Chee Kiam May 17 '20 at 15:03