How to use SCSS mixins with angular 7?

When working with the Angular CLI, the default stylesheets have the .css extension.

Normally, when we run ng new my-app, our app will have .css files. To get the CLI to generate .scss files (or .sass/.less) is an easy matter.

Create a new project with Sass with the following:

ng new my-sassy-app --style=scss

If you've already created your Angular CLI app with the default .css files, it will take a bit more work to convert it over. You can tell Angular to start processing Sass files with the following command:

ng set defaults.styleExt scss

This will go ahead and tell the Angular CLI to start processing .scss files. If you want to peek under the hood at what this command did, check out the Angular CLI config file: .angular-cli.json.

You'll find the new config line at the bottom of the file:

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

The Angular CLI will start processing Sass files now. However, it doesn't go through the process of converting your already existing .css files to .scss files. You'll have to make the conversion manually.

I personally like creating Sass files for project variables and for project mixins. This way, we can bring in any variables/mixins we'll need quickly and easily.

For instance, let's create a brand new CLI app:

ng new my-sassy-app --style=scss

Next, create the following files:

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

To start using these new Sass files, we'll import the _variables.scss and _mixins.scss into the main styles.scss.

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

The last step is to update our .angular-cli.json config to use this new src/sass/styles.scss instead of the src/styles.scss. In our .angular-cli.json file, just change the following line to point to the right styles.scss.

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

Note: Separating out our Sass into its own folder because it allows us to create a more robust Sass foundation.

Now when we start up our app, these new Sass files will be used!

We have new _variables.scss and _mixins.scss files that we will probably want to use in our components. In other projects, you may be used to having access to your Sass variables in all locations since your Sass is compiled by a task runner.

In the Angular CLI, all components are self-contained and so are their Sass files. In order to use a variable from within a component's Sass file, you'll need to import the _variables.scss file.

One way to do this is to @import with a relative path from the component. This may not scale if you have many nested folders or eventually move files around.

No matter what component Sass file we're in, we can do an import like so:

// src/app/app.component.scss

@import '~sass/variables';

// now we can use those variables!

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

In addition to using the ~, we can specify the includePaths configuration when working with the CLI. To tell Sass to look in certain folders, add the config lines to .angular-cli.json like in the app object next to the styles setting.

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

Another scenario we'll need to do often is to import third party libraries and their Sass files.

We'll bring in Bootstrap and see how we can import the Sass files into our project. This is good since we can pick and choose what parts of Bootstrap we want to use. We can also import the Bootstrap mixins and use them in our own projects.

To get us started, install bootstrap:

npm install --save bootstrap

Now that we have Bootstrap, let's look at how we can include the basic CSS file. This is an easy process by adding the bootstrap.css file to our .angular-cli.json config:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "sass/styles.scss"
],

Note: We're using the .. because the CLI starts looking from within the src/ folder. We had to go up one folder to get to the node_modules folder.

While we can import the Bootstrap CSS this way, this doesn't let us import just sections of Bootstrap or use the Sass variables/mixins that Bootstrap provides.

Let's look at how we can use the Bootstrap Sass files instead of the CSS file.

@import "functions";
@import "variables";
@import "mixins";
@import "print";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";

That's a lot of tools that you may not use in your own project.

Inside our src/sass/styles.scss file, let's import only the Bootstrap files we'll need. Just like we imported Sass files from the src folder using the tilde (~), the tilde will also look into the node_modules folder.

While we could use the tilde, since we already added Bootstrap to our include_paths in the stylePreprocessorOptions section of our .angular-cli.json:

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

We can do the following to only get the Bootstrap base tools:

@import 
  'functions',
  'variables',
  'mixins',
  'print',
  'reboot',
  'type';

Reference: https://scotch.io/tutorials/using-sass-with-the-angular-cli