Handling CSS Preprocessors with the Angular 5

In this article, we will discuss handling CSS Preprocessors with the Angular. The question is, what is CSS preprocessor. CSS preprocessor makes our styling more effective and reusable. CSS is old and incomplete. Because CSS not having an option to make functions, reusable classes, and etc. CSS Preprocessor provides all those options to make CSS more flexible.

Lot’s of CSS preprocessor available now such as LESS, SCSS, SASS, Stylus and etc. For large applications maintenance is a very big problem. Also when your web application contains multiple skins then its too hard to manage all the styles using CSS only. We will discuss more on CSS Preprocessor in our future articles. When we are working with the Angular Js application. CSS is the default stylesheet and having the .css extension.

Before proceeding, I’m assuming you are familiar with the Angular CLI. If no then you can start with given articles or the official docs.

• Laravel Setup
• Laravel Default Authentication Setup

# Setup New Project Using Angular CLI With SCSS

Basically, when we create an Angular app then we get the .css file as our default stylesheet. It’s easy to add the .scss (CSS Preprocessor) with the Angular CLI. Let’s create a new project with SCSS with the following command:

ng new ng-scss-app --style=scss

You can also set the –style flag as per your CSS preprocessor with the following:

--style=scss
--style=sass
--style=less

# Converting a Current App

If you are created your app with the default CSS. Then you can convert the app CSS to the SCSS using following command.

ng set defaults.styleExt scss

The above command tells the Angular CLI to start processing .scss. You can check the Angular CLI config file “angular-cli.json”. This config file located at the root of the app and at the bottom of the file, you found:

"defaults": {
  "styleExt": "scss",
  "component": {
  }
}

You’ll have to convert your CSS files into SCSS manually.

# Setup SCSS Imports

We will create the following folder structure for SCSS files.

--- src/
--- scss/
--- _variables.scss
--- _mixins.scss
--- styles.scss

We’ll import the _variables.scss and _mixins.scss into the main styles.scss.

// src/sass/styles.scss

@import './variables';
@import './mixins';

Finally, You’ll have to update your “angular-cli.json”. In this file, you just need to change the following line to point to the right styles.scss.

"styles": [
  "scss/styles.scss"
],

# Importing SCSS File Into Angular Components

Our SCSS variables and mixins files are ready for use in our components. You may be used to having access to your Scss variables in all locations since your Scss is compiled by a task runner.

You can use @import with the relative path from the component. This may not be scaled if your app having many nested folders. The Angular CLI provides an easy way to import SCSS file using ~ tilde symbol. No matter, how many nested folders available, You can do an import like so:

// src/app/app.component.scss

@import '~scss/variables';

The tilde (~) symbol is a quick shortcut to importing SCSS files and tell SCSS to look in the src/ folder.

# SCSS Include Paths

We can directly tell us to SCSS to look in the certain folder. You just need to update given example of ‘stylePreprocessorOptions.includePaths’ into the “angular-cli.json”.

"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/bootstrap/scss"
  ]
},

# Setup Bootstrap SCSS

Let’s setup Bootstrap in our app using given command.

npm install --save bootstrap

After successful installation, let’s include the bootstrap CSS into “angular-cli.json”.

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "scss/styles.scss"
],

The CLI starts looking from within the src/ folder so we are using the double dot (..) to go up one folder to get to the node_modules folder. You can also copy the bootstrap SCSS folder from the node_modules/bootstrap directory and place this folder in your custom SCSS folder which we created last time. And you can use bootstrap module separately as per your requirement.

As we know this bootstrap is used jquery plugins such as accordion, collapse, carousel and etc. All these plugins are not working without jQuery and Popper js. Popper.js is introduced in the bootstrap (v4.*.*) So you have to include pooper.js with bootstrap.

# Conclusion

In this article, we will discuss how to integrate CSS Preprocessors in Angular. Hope you like this article. So feel free to comment if any query and share this with your friends.

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee