CSS Pre-Processors

Let’s take a look at some CSS pre-processors.

SASS/SCSS

If you did not choose SASS during the initial setup or opted out of a pre-processor for the default template, you can still add it and use it. You will need to install a few packages with the NPM or Yarn command.

$ npm install sass-loader node-sass style-loader --save-dev
# or
$ yarn add sass-loader node-sass style-loader --save-dev

Once the packages are installed, just add the lang="scss" (or sass) attribute to your <style> tag and start using it right away.

LESS

If you did not choose LESS during the initial setup or opted for the default template, you can still add it and use it. You will need to install a few packages with an NPM or Yarn command.

$ npm install -D less less-loader
# or
$ yarn add less less-loader

Once the packages are installed, just add the lang="less" attribute to your <style>. Just like SASS.

Stylus

If Stylus is your cup of tea, the installation...