Webpack error on .scss when using preact build

[jonburger]

So, I tried to add SASS support - like others I needed to npm install sass-loader node-sass postcss -D - I also needed to update the import to import './style/index.scss'

Now, when I npm run build everything seems to generate just fine except the index.html page - it contains the same error as the console, which is...

Template execution failed: SyntaxError: /preact-app/style/index.scss: Unexpected token, expected ; (1:11)
  SyntaxError: /preact-app/style/index.scss: Unexpected token, expected ; (1:11)
  > 1 | html, body {
      |            ^
    2 |  height: 100%;
    3 |  width: 100%;
    4 |  padding: 0;

Googling this error brings up lots of finger pointing at Webpack in one way or another - in particular it's an issue with SSR I think is the gist of it:

webpack-contrib/sass-loader#69
webpack/webpack#1754
react-toolbox/react-toolbox#662

It would appear that the .scss module is being interpreted as .js when it is loaded for SSR and it then fails - that's about as much as I can figure out.

[developit]

@jonburger just to narrow things down, does this happen if you do preact build --no-prerender or npm run build -- --no-prerender? If so, that means it's an issue with the SSR/prerendering.

[jonburger]

preact build --no-prerender and even preact build don't seem to do anything but write a list files to the console https://gist.github.com/jonburger/c5308d55511ce9d94e8cad236fb84939

npm run build -- --no-prerender does work, and doesn't exhibit the error - so it would suggest the problem is the prerendering.

[developit]

@jonburger which npm/node versions are you using?

[jonburger]

$ node -v
v7.10.0

$ npm -v
4.2.0

[developit]

The preact build bit seems to be from a linked module? or the global version is lagging your local. Should work as ./node_modules/.bin/preact build --no-prerender. Definitely an prerendering issue - there's no loader defined for scss in the prerendering code. I think this is another push for using webpack to bundle code even under node.

[jonburger]

So is the current suggestion for this version of preact-cli, that if prerendering is important then scss not be used?

Is there anything in the roadmap that would address these issues?

Also with Webpack's announcement of it's plan for making CSS a "first-class citizen" in that couple of days (I can't say I fully understanding the bulk of the Medium article) does that mean things will get easier in regards to prerendering?

[rkostrzewski]

@jonburger currently we're working on prerendering using webpack bundled code which would mean that anything that is valid in webpack is valid in prerendering. 😄

[jonburger]

@rkostrzewski sounds good! 😁

[rkostrzewski]

Support for this landed in 1.3.0. 😄