search

colinbate / ng2-brunch

Basic Brunch skeleton for Angular 2 with TypeScript.
40 stars 19 forks source link

Build *.SCSS on Brunch start #11

Closed zenithtekla closed 8 years ago

zenithtekla commented 8 years ago

Can you make Brunch to build SCSS files to our unified, minimised app.css?

colinbate commented 8 years ago

I've tried to leave this skeleton as un-opinionated as possible regarding CSS preprocessors. I usually use LESS with my projects, but you can use SASS/SCSS using this plugin: https://github.com/brunch/sass-brunch

If you are having any specific trouble integrating it, let me know. I might be able to help on Gitter.

zenithtekla commented 8 years ago

Can you have a look and let me know if it is done correctly on my end? https://github.com/zenithtekla/ng2-brunch Thanks.

colinbate commented 8 years ago

Ultimately, if it does what you want then that is great. However, I do have a couple of comments.

  1. Minor, sass-brunch should probably be a devDependency like the rest of the brunch stuff.
  2. Don't import myscss from base.scss. Since the contents of myscss.scss are output (it isn't just variables or mixins) it is being included twice, once with base and once on its own. You can see the results of what is being compiled in the public/app.css file. Brunch will find all your scss files in the app folder and build them. If you don't want it to do that, you can prefix your file with an underscore. It won't include _myscss.scss, and so then you could do @import 'myscss' in base.scss if you wanted. However, unless you need access to variables or mixins from a file, you shouldn't need to @import it given the way Brunch works.
  3. All of your scss files will be used for your app.css which is global in nature. You won't be able to use them for including CSS in the styles attribute of an Angular 2 component. For that you'd need a specially modified version of the sass-brunch plugin which basically compiles the scss files into a JavaScript string. It is quite possible to do this, but I'm not aware if it exists already. The inline-css-brunch plugin I wrote does it for plain CSS, but I haven't created anything for LESS or SCSS yet.
colinbate commented 8 years ago

Also there is some sort of ssh script in the root of the repo which is probably not meant to be there.