This folder is actually fairly self-explanatory: it contains your LESS/CSS files to be compiled during the build.
The only important thing to note is that only main.less
will be processed during the build, meaning that all
other stylesheets must be imported into that one.
This should operate somewhat like the routing; the main.less
file contains all of the site-wide styles, while
any styles that are route-specific should be imported into here from LESS files kept alongside the JavaScript
and HTML sources of that component. For example, the home
section of the site has some custom styles, which
are imported like so:
@import '../app/home/home.less';
The same principal, though not demonstrated in the code, would also apply to reusable components. CSS or LESS files from external components would also be imported. If, for example, we had a Twitter feed directive with an accompanying template and style, we would similarly import it:
@import '../common/twitterFeed/twitterFeedDirective.less';
Using this decentralized approach for all our code (JavaScript, HTML, and CSS) creates a framework where a component's directory can be dragged and dropped into any other project and it will "just work".
I would like to eventually automate the importing during the build so that manually importing it here would no longer be required, but more thought must be put in to whether this is the best approach.