Can't create CSS from SASS using Webpack

Question

I've created a minimal file global.sass with the following contents (taken from here).

$font-stack:    Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

In my webpack.config.js I have added the following loaders to module section (the second one taken from here as sugested on Webpack's page here).

module: {
  loaders: [
    { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
    { test: /\.sass$/, loader: "sass-loader", exclude: /node_modules/ }
  ]
},

In my gullible hopes I thought that running webpack --progress would produce a CSS file but apparently, nothing like that occurs. I only get a new version of bundle.js but the contents of the global.sass file aren't anywhere in it. No CSS file's produced at all.

Hi. Just to clarify: are you requiring/importing `global.sass` somewhere? — mrlew, Jan 17 '17 at 21:57
@mrlew No, I am not. I was under the impression that Webpack's going to produce me a CSS file that I can link to in my HTML. I conclude by your comment that I was mistaken. Where do I put the require/import? Directly in the config file for Webpack? Or in my *index.js*? — , Jan 17 '17 at 22:24
@AdamWolski Indeed, I'm not importing that file as it's now. How do I do that? Should I alter config for Webpack or should I add `import` in the starting JavaScript file? I was expecting a CSS to be produced and didn't consider linking to the SASS file at all. — , Jan 17 '17 at 22:26

mrlew · Accepted Answer · 2017-01-17T22:37:55.353

1

First of all, you need to require somewhere your style file.

For instance, if your entry file is main.js you can have something like this:

require('./global.sass');
/* or, if you're using es6 import:

    import css from './global.sass'; 
*/

To clarify the process a bit: sass-loader process the .sass files and converts it to a valid css file (in memory, let's say so). Then, you'll have to chain (backwards) loaders to finally add the styles to your page:

A default configuration would be:

loaders: [
    /* ... */
    { 
        test: /\.sass$/, 
        loaders: ["style-loader", "css-loader", "sass-loader"], 
        exclude: /node_modules/ 
    }
    /* ... */
]

where css-loader resolves a CSS file and style-loader add a <style> tag at the bottom of your <head> with your style.

Before running that, make sure you've installed those packages:

npm i css-loader style-loader sass-loader node-sass --save-dev

You can, however, extract all your styles into a separated css file using the popular extract text plugin.

We can say, then, to summarize, that webpack does not generate a separated css file due to the style-loader (that adds a style tag to your DOM), unless you use the extract text plugin (very common in productions build).

edited Jan 17 '17 at 22:37

answered Jan 17 '17 at 22:30

mrlew

7,078
3
25
28

Oh, so all the three loaders work in-memory? I see. I then understand the need for the plugin. What I don't get is why we have to use *style-loader* if we indent to plugin-out the CSS file and link to it? Also, I'm not sure why the plugin would be a preferred approach in production. +1 for a great formulation. – Jan 17 '17 at 23:01
@AndyJ as far as I know, the main concern is when you a have huge app, you'll have a bunch of ` – mrlew Jan 17 '17 at 23:08
@AndyJ if you use the plugin, you don't need `style-loader`. According to the [docs](https://github.com/webpack/extract-text-webpack-plugin), only to fallback purpose. – mrlew Jan 17 '17 at 23:11
Hmm... Okay, so I get that part. Seems logical. However, I get an error now: *Unexpected token (1:5)* and when I add/remove lines in the SASS file, the numbers don't change (still 1:5). It also suggest that I need another loader. All the loaders you've suggested are installed, though. What else could I be doing wrong, please? – Jan 17 '17 at 23:17
Correction to the error part. It only barks at the line with *font*. The others do not produce any error. Still need to verify that they do count in the file, though. – Jan 17 '17 at 23:20
@AndyJ put a `background-color: $primary-color` in the `body` just to visually test. – mrlew Jan 17 '17 at 23:23
Thanks. It's working now. Let me just try out the plugin part and I'll accept the answer. Still, can't figure out why *font: 100% $font-stack* failed on the loader. It's a valid style, isn't it? Taken from SASS's web site, too... – Jan 17 '17 at 23:35
@AndyJ yes, it's valid. But yout font is not being changed to Helvetica? I tried your example here and it's ok for me. – mrlew Jan 17 '17 at 23:45
Naa, it didn't take the plugin part. I suspect that the difference is that **without** plugin, I'm using the field *loaders* (plural) and **with** plugin I have to use *loader* (singular). I've seen a cheat to use *style!css!sass" but I've been informed that it's a bad style and should be refrained from. I'll ask another question on this specifically. – Jan 17 '17 at 23:47
@AndyJ I used it a long time ago, I'll have to check my old projects in order to remember how to use it :) – mrlew Jan 17 '17 at 23:52
If you find time/joy to do that, take a look [here](https://stackoverflow.com/questions/41709222/how-to-specify-multiple-loaders-in-webpack-plugin). Otherwise, thanks for this one and have a nice evening. – Jan 18 '17 at 00:02
@AndyJ I'll check it out. And you're welcome, glad to meet you! – mrlew Jan 18 '17 at 00:04

Can't create CSS from SASS using Webpack

1 Answers1