Are less files loaded automatically?

jpfernandezl · January 18, 2018, 2:47am

In the example todos app:

The not found page is made up of 3 files:
app-not-found.html
app-not-found.js
app-not-found.less

the app-not-found.js javascript file only includes the html
import ‘./app-not-found.html’;

should it include the less file too ?

serkandurusoy · January 18, 2018, 3:18am

It is already being imported from /client/main.less :

github.com

meteor/todos/blob/6fd10c766c932bd1699522dd0d8b8d315690c072/client/main.less#L21


@import '{}/imports/ui/stylesheets/nav.less';


// Global components
@import '{}/imports/ui/stylesheets/list-items.less';
@import '{}/imports/ui/stylesheets/message.less';
@import '{}/imports/ui/stylesheets/notification.less';


// Individual components
@import "{}/imports/ui/components/lists-show.less";
@import "{}/imports/ui/components/loading.less";
@import "{}/imports/ui/pages/app-not-found.less";
@import "{}/imports/ui/accounts/accounts-templates.less";

jpfernandezl · January 18, 2018, 3:07pm

When importing CSS from a JavaScript file, that CSS is not bundled with the rest of the CSS processed with the Meteor Build tool, but instead is put in your app’s tag inside … after the main concatenated CSS file.

The todos app includes all the less files in the main.less file to generate a single bundle and do not include css in the head tag.
I think it is a better approach.