Preact-cli: Documentation on how to use SASS

[jeanlucaslima]

Do you want to request a feature or report a bug?
Feature/improvement.

If this is a feature request, what is motivation or use case for changing the behavior?
The documentation won't explain easily how to use things like sass, and even lead to incorrect behaviours like using the flag --sass as mentioned in #411

[guido4000]

This is how I added it:

• $ npm install --save-dev node-sass sass-loader
• create helpers.scss file
• rename index and component style file extensions to .scss
• import helpers.scss in index and component scss files: @import "src/style/helpers"

[jeanlucaslima]

@guido4000 yeah, it indeed does that and is solved on #411. This issue is about having this documented.

[developit]

I would really love to fix our auto-installation for sass/sass-loader. Then we could add automatic renaming during project init (preact create default foo --sass) and there'd be no more steps!

[jeanlucaslima]

@developit that sounds the best approach, actually.

Why was the --sass removed? How can this be changed? I am willing to try a PR solving it.

[lukeed]

It removed as a reaction to having way too many flags for the CLI haha. We probably went a little too far in the other direction, but now we have plans to move back towards Jason's comment. 🙌

[dsky1990]

same idea with you @jeanleonino

[vutran]

Any plans on getting this reimplemented (along with other loaders)? Otherwise, we should just update the documentation with the manual steps of installing the appropriate packages and loaders.

Another idea would be automatically installing these required packages/loaders on the watch command upon demand if a one of these alternative CSS lang (stylus, less, sass, etc.) is present in src/style.

[lukeed]

Yeah! Right now auto-installation is on the roadmap. Unfortunately doesn't help right now, so you still need to rename your file extensions and install node-sass and sass-loader manually.

[vutran]

Lmk where I can help.

Side note, it would make sense to document it in the meantime in the README. If so, maybe @jeanleonino can create the PR as originally suggested.

[MattSidor]

Can this issue please be re-opened? I am struggling to figure out the correct config changes I need to make to get *.scss files to transpile/load correctly...

[MattSidor]

I think I've figured this out for my project.

Is it correct that the *.scss files must be in src/style folder and no where else? I tried importing a SASS file from within a component subfolder, but couldn't get it to work...

I am happy to make a PR that adds instructions for setting up SASS files, but it would just be for SASS and not CSS Modules, LESS, Stylus, or Autoprefixer. Is that OK?

[nephix]

+1 on reopening this

[ForsakenHarmony]

It should work anywhere

if they're in components or routes they get parsed as css modules

[nephix]

@ForsakenHarmony yes I think it work's, although I didn't check it in the last release candidate.

I think this ticket is more about having the info on how to set things up in the README.md, because if I remember correctly there were quite a bit of steps to take to make it work right?

[ForsakenHarmony]

No, it works out of the box

[nephix]

Oh that's good to know. Seems like the initial steps @guido4000 outlined a while ago and that I had in mind aren't necessary anymore then :)

[ForsakenHarmony]

Ok well you still have to install node-sass and sass-loader

But the other stuff is project specific

[nephix]

I liked the idea of having a --sass flag like @developit and @lukeed proposed that installs node-sass, sass-loader and does the renaming so it actually works _out of the box_. Or at least have some piece of documentation in the README.md about setting it up like @guido4000 wrote in his initial reply. Thoughts?

[lukeed]

The flag(s) idea came about because at the time, we had dropped the "proxy-loader" due to some odd behaviors it was causing.

Since then, we now include the configuration for SASS, LESS, and Stylus out of the box, so we're now back to the "You just need to install it" approach.

Having the --sass (and other) flags on preact create could work out well for us. I went with that approach in my own tooling and it's been nice – however, it does somewhat insinuate that if you don't create your app with SASS initially that it's too late to use it or switch to it as your app grows/changes.

This mostly remains a documentation/education issue, imo