Maybe you doesn't use the sass loader in tour webpack configuration.

Try install this loader: Sass loader

Example of webpack config:

module.exports = {
  module: {
    loaders: [
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
  sassLoader: {
    includePaths: [path.resolve(__dirname, "./some-folder")]

I can suggest also you to use postcss to apply autoprefixer!


The project that the OP mentioned is using this:

So yes, another loader + an interface to insert and use the styles.


You need yet another loader to make css/style loaders to work.

But Webpack is made for client side code development only: it finds all require() calls inside your code and replaces them with various kinds of magic to make the things work. If you try to run the same source code outside of Webpack - for example, on a Node.js server - you'll get a ton of SyntaxErrors with Unexpected tokens. That's because on a Node.js server there's no Webpack require() magic happening and it simply tries to require() all the "assets" (styles, images, fonts, OpenGL shaders, etc) as if they were proper javascript-coded modules hence the error message.

Good luck!


I think you also want to see this SO question. Importing CSS files in Isomorphic React Components

Related Query

More Query from same tag