Sass (SCSS) support

[jonaswindey]

I'm having problems with loading .scss files as my stylesheets.

I tried adding https://github.com/jtangelder/sass-loader but I see what I should change in the config to add this rule:

require("!style!css!sass!./file.scss");

I renamed style.css to style.scss and changed require("./style.scss"); in my index.jsx file, but I get:

ERROR in ./app/Application/style.scss
Module parse failed: /Users/jonas/Development/github/react-starter/app/Application/style.scss Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.

Where do I add this sass-loader in the current make-webpack-config.js ?

[sokra]

https://github.com/webpack/react-starter/blob/master/make-webpack-config.js#L33

Looks like I bound it to the wrong extension...

[sslash]

I am having a different issue with this. It works when the browser is rendering, but when I prerender I get this:

            return /msie 9\b/.test(window.navigator.userAgent.toLowerCase());
                                   ^
ReferenceError: window is not defined
    at /Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:2783:27
    at /Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:2778:48
    at module.exports (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:2799:69)
    at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:1845:38)
    at __webpack_require__ (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:21:30)
    at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:246:2)
    at __webpack_require__ (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:21:30)
    at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:94:36)
    at __webpack_require__ (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:21:30)
    at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:52:15)```

[sokra]

Looks like the style-loader is used in prerender. By default the stylesheets are loaded by the null-loader for prerendering (https://github.com/webpack/react-starter/blob/master/make-webpack-config.js#L104).

[kaiomagalhaes]

When I change a file from css to sass i get an error showing tht the sass-loader is not installed, after I do it it starts to throw the following error:

ERROR in ./~/css-loader?module&localIdentName=[path][name]---[local]---[hash:base64:5]!./~/sass-loader!./app/containers/Application.sass
Module build failed: 
body 
^
      Invalid CSS after "": expected 1 selector or at-rule, was "body "
      in /media/WORK/workspace/react-starter/app/containers/Application.sass (line 1, column 1)
 @ ./app/containers/Application.sass 4:14-191

and my applicatipn.sass

body 
  background: red

.this 
  opacity: 1


.this.loading 
  opacity: 0.2
  transition: opacity 600ms


.this .loadingElement 
  display: none


.this.loading .loadingElement 
  display: inherit

.loadingElement 
  float: right

Any idea?

[caedes]

@kaiomagalhaes I met the same issue as you yesterday night. Did you managed to solve it?

[kaiomagalhaes]

@caedes Sorry bro, no. In the end I decided to use the scss.

[HunSpeedi]

I had the same problem like @jonaswindey.
It solved after I installed the style-loader and the css-loader.
https://github.com/webpack/style-loader
https://github.com/webpack/css-loader

So the install process:
npm install sass-loader node-sass webpack --save-dev
npm install style-loader --save-dev
npm install css-loader --save-dev

Modify webpack.config.js like this
module: { loaders: [ { test: /\.scss$/, loaders: ["style", "css", "sass"] } ] }

And the .js file like this require("./style.scss");

[ssolanki]

After trying many solutions finally, I am able to make it work.
Thanks @HunSpeedi

[Hello-Zeze]

@HunSpeedi, how did you get it to work on your side?

[csidro]

@Hello-Zeze I wrote down above the full process! If you follow the instructions, that must be solve it i think.

[scottdevito]

@HunSpeedi 's solution solved the issue for me. I installed the packages and previously had:
{
test: /.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "sass"]
},
and it still didn't work. Once I deleted the line: "include: paths.appSrc,", everything complied nicely. Hope that helps.