How to generate regular CSS file from SASS?

Question

Normally I use

{ test: /\.sass$/, loader: 'style!css!sass?indentedSyntax' }

and then in main.js

require('./styles.sass')

But it applies style using javascript when main.js is loaded. The problem is that my app us isomorphic and returns some html initially. Because I load main.js just before </body> tag, then styles are applied to document a bit too late (user sees not-styled HTML for a moment).

Therefore I would like to generate regular css file from styles.sass and then simply include id in <head></head> to make sure it is loaded initially. How I can generate regular css file?

I tried:

entry: {
  styles: path.resolve(__dirname, 'app/styles.sass')
}

but it generates styles.js instead of .css file. Moreover if I include styles.js in a head then I get following error in console from styles.js:

Uncaught ReferenceError: webpackJsonp is not defined

cj.knowles · Accepted Answer · 2015-07-05 14:54:46Z

1

Use the extract text plugin.

Put this in your loaders:

{ test: /\.scss$/, loader: ExtractTextPlugin.extract("css!sass") }

...and in your plugins:

plugins: [
  new ExtractTextPlugin("styles.css")
]

Adapted from...

http://webpack.github.io/docs/stylesheets.html#separate-css-bundle

answered Jul 5, 2015 at 14:54

cj.knowles

263 bronze badges

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

Comments

Gustaf Gunér · Accepted Answer · 2015-07-03 08:10:33Z

0

When I use Sass in my projects, I in most cases use the same file structure. At least when it comes to the css-folder.

├── index.html
├── /css 
│   ├── style.css
│   ├── /sass
│   ├───── style.scss
│   ├───── ...

In the public folder where I tend to put my js, css and images folder, I always make a batch file. Something like this:

cd "`dirname "$0"`"
sudo sass --watch css/sass:css

This works for all my projects. I just run it and minimize the window. This looks for changes and converts Sass to regular css to the style.cssfile. Then in my index.html I just include css/style.css.

Hope this helps you

answered Jul 3, 2015 at 8:10

Gustaf Gunér

2,2674 gold badges19 silver badges23 bronze badges

1 Comment

user606521 Over a year ago

But I want it to be handled by webpack actually.

Collectives™ on Stack Overflow

How to generate regular CSS file from SASS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related