Weird css issue...

[PostImpatica]

I have no idea where to ask this so I apologize. After using yarn start, each of my css files are no longer formatted and everything is on one line. It's insanely annoying and I don't know if it's VSCode doing it or something in the qdouble build process. Has anyone seen this?

[Matmo10]

You should be editing .scss files, not .css files. The .css files are generated (and minified). The css will get regenerated every time you make a change in the corresponding .scss file.

[PostImpatica]

lol, Thanks!

[Matmo10]

No problem :)

[PostImpatica]

This is confusing, i'm used to webpack handling the sass but in this project the sass compilation is handled outside of webpack. So if anyone else gets this error, don't try pointing your styleUrls to a sass file because webpack will complain that you need a loader. You don't need a loader, what you need to do (at least this worked for me) is you need to add the recursive option to the node-sass command line arguments. look in your package.json and then find the two node-sass script lines and add -r before the first src on each of the lines.

[Matmo10]

The reason for that is that the AOT compiler only works with css files right now. So, as you said, your styleUrls need to reference the .css files.

This might change soon once the webpack aot plugin is integrated into this project, see this thread for info: #112

[qdouble]

Yeah, once we switch over to using the aot webpack plugin, you'll be able to point straight to the scss file, but the plugin has too many bugs so I don't think it's worth switching yet. Pointing to the css file shouldn't be a huge burden in the meantime, imo.