1

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.

Improve this question
5
  • Hi. Just to clarify: are you requiring/importing global.sass somewhere? Commented Jan 17, 2017 at 21:57
  • you need to import that file first Commented Jan 17, 2017 at 22:10
  • @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? Commented Jan 17, 2017 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. Commented Jan 17, 2017 at 22:26
  • @AndyJ I created an answer (not enough room here) Commented Jan 17, 2017 at 22:31

1 Answer 1

Reset to default
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).

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

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.
@AndyJ as far as I know, the main concern is when you a have huge app, you'll have a bunch of <style> tags. Some prefer a distributable file, mainly to cache/fingerprint.
@AndyJ if you use the plugin, you don't need style-loader. According to the docs, only to fallback purpose.
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?
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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.