Next.js: Use an external SCSS

[DominikLevitsky]

I am trying to use a single SCSS file, that includes all the other files. I don't want to include CSS code in my JS files. How can i compile this using Webpack? Is it actually possible here?

[timneutkens]

Please check https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet. It has an
example for .scss 😄

[pulkitnandan]

can this done for components too but scoped. this example fails on linux

https://github.com/zeit/next.js/tree/master/examples/with-external-scoped-css

[warrenday]

The example works with files with the .sass extension but compiles nothing for .scss files, even when .scss is added to the extensions array in the .babelrc file. Any idea why?

[aviramga]

@warrenday Im having the same issue, were you able to solve it?

[warrenday]

@aviramga Sorry had no luck with that!

[gbrlsnchs]

@aviramga @warrenday I see the example has indentedSyntax set to true in the pre-processor.js file. According to the node-sass README, this option should be set true when compiling SASS.

I'm not sure if removing that line or setting that option to false might solve your problem, but you should give it a try!