As any CSS junkie already knows, using standard CSS to create style sheets can be tedious, redundant work. Many designers and developers prefer to use a dynamic style sheet language or preprocessors, such as Less, Stylus, and SCSS/SASS.
Meteor not only enables the use of preprocessors, but also treats them just like any other file so that changes are reflected immediately.
This recipe will show you how to enable some of the more popular CSS compilers in your Meteor application.
Nothing is needed to prepare for this recipe, other than having Meteor installed, and a project created so that you can begin using CSS compilers.
We're going to cover three different preprocessors, as they all work in a similar way.
Open a terminal window and navigate to the root folder of your project.
Enter the following command:
$ meteor add stylusYou should see a response similar to the following in the terminal window:
stylus added, version 1.0.7Stylus is now installed and ready to be used. You can test this by creating a
.stylfile and adding a script (for example, addtest.stylto yourclient/stylesfolder).
When you start your Meteor application with the meteor command, Stylus files will be processed and proper CSS will be rendered.
Open a terminal window and navigate to the root folder of your project.
Enter the following command:
$ meteor add lessYou should see the following response in the terminal window:
less added, version 1.0.14Now the Less package is installed, and you can use the Less stylesheet syntax to create your CSS.
As with Stylus, you can test this by creating a .less file and adding some style declarations (for example, add test.less to your client/styles folder).
When you start your Meteor application with the meteor command, the Less files will be compiled by Meteor into standard CSS and rendered as usual.
SCSS and SASS files can now be used to style your CSS. Just as before, you can test this by creating a .scss or .sass file and adding some style declarations (for example, add test.sass to your client/styles folder).
When you start your Meteor application with the meteor command, the SCSS or SASS files will be compiled by Meteor into standard CSS and rendered.
When you installed any of the preprocessors with the meteor add command, it installed the corresponding npm packages tailored to work inside of Meteor.
As with other files, Meteor will monitor changes to any *.styl, .less, .scss, and .sass files, compile the changes into CSS, and render the changes immediately.
The Adding Meteor packages recipe in Chapter 2, Customizing with Packages