Recommended way of adding build process for CSS

[chrisvfritz]

I'd like to use SCSS in an Arch project, but seeing as it hides the Webpack config from you, I'm not sure what the best way of handling this would be.

[tabazevedo]

@chrisvfritz In the works. I have a working solution which reads your local webpack config from your project and extends the arch default. Atm I'd use gulp or something else to bundle your styles, which is what we do where we use arch right now.

[tabazevedo]

Sort of related: #21

[chrisvfritz]

😃 That sounds rad! I'll use gulp in the meantime.

[charypar]

I'd say that is the long term approach anyway. I'm really against exposing the Arch build step and mixing it with app concerns, because it'll in turn make it way harder for us to iterate on the details of the build step.

Say we started with browserify and then webpack came out with react hot loader. We'd want to use that, but it would be a huge breaking change and really tricky to do. This can and will happen again in the future...

[charypar]

In short - use your own build step as you would otherwise. We should make the fact the dist folder is publicly served more obvious in the docs or generator-arch.

[chrisvfritz]

I can definitely see the hesitation in exposing the Arch build process. Until inline CSS with React is more reliable though, I think it does make sense for a default configuration to exist, supporting at least one popular CSS preprocessor. It looks like at Red Badger, you use SASS, Less, and Stylus. So here's a proposal:

Default builds would be set up for SASS, Less, and Stylus, watching the following folders:

• app/sass
• app/scss
• app/less
• app/stylus

If any of the above folders exist and contain a main.extension file, then in the first matching folder, that main.extension file is built into dist/css/main.css. I think this would cover most use cases, be relatively simple to set up and maintain in Webpack, and you could switch to Broccoli in a month, have it do the same thing, and still not mess anyone up.

But... if someone wants to do something more complicated, then they can configure their own setup outside of Arch. What do you think?

[charypar]

I suppose we should have an example with how you'd go about setting such a thing up. I added it to the ideas in #69. For Arch, I'd say this is out of scope, until we decide to include support for CSS in JS.

I believe you don't even need webpack for this, just plain gulp would work, right?

[chrisvfritz]

Yeah, setting this up outside of Arch is pretty trivial. It just means a little extra configuration whenever starting a new project that includes external CSS and a preprocessor - which I'd guess would be most projects. And then it's also necessary to run another watcher alongside arch-cli s -w. Just a little annoying. :-/