Demo

Now, let’s see the demo in a new angular project.

ng new angular-live-sass --style=scss

cd angular-live-sass

Let’s create a new component “House”:

ng generate component house

Now we have two components, the main AppComponent and the new component HouseComponent.

In the template of AppComponent, we will replace the default content by this:

<h1>This is my new app</h1>



<app-house></app-house>

and its style:

h1 {

color: indigo;

}

In the HouseComponent’s template:

<p>This is my new house</p>

and in house.component.scss:

p {

font-size: 20px;

color: coral;

}

Now let’s build our application and starts a web server with

ng serve -o

Our application will look like:

Capture before using live sass feature

You can notice that on the right, next to the h1[_ngcontent-c0], the “<style></style>” means that this style rule is actually in the <head> tag.

To make the live-edit work, we will go to my github repository and get the folder “livesass” that contains two files:

gulpfile.js

livesass.js

Put this folder at the root of your angular application, you’ll have the following tree:

Add this script into package.json:

"livesass": "gulp --gulpfile livesass/gulpfile.js"

In index.html, add inject:css and inject:js to let gulp know where it should inject our custom css and script:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>AngularLiveSass</title>

<base href="/">



<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="favicon.ico">

<!-- inject:css -->

<!-- endinject -->

</head>

<body>

<app-root></app-root>

<!-- inject:js -->

<!-- endinject -->

</body>

</html>

Install some gulp package:

npm install -g gulp

npm install --save-dev gulp gulp-inject gulp-inject-string gulp-sass gulp-sourcemaps map-stream

Now, if we want to live edit style of our two components, we need to run this command:

npm run livesass -- --dirPaths=src/app/house/ --dirPaths=src/app/

dirPaths is the path of the components we want to live edit.

The last thing to do now is activate the developer tools experiments of Chrome devtools, to do that, we have to go to: chrome://flags and enable the option “developer tools experiments” and restart your browser. Then, open your Chrome devtools, go to Settings, you will see a new tab “Experiments”, make sure that you tick the “Live Sass” option.

Now let’s see how our site look like:

Capture after using live sass

Wow, as you can see, now at the right side, we have “app.component.scss” instead of “<style></style>” because the style of AppComponent now is no longer in the head but in the app.component.scss file.

One last thing we have to do, is map this file with the app.component.scss on your disk. To do that, we need to go to Sources tab and add our “angular-live-sass” folder in the workspace

Add folder to Chrome devtools workspace

Once our folder is in the workspace, right click on the app.component.scss and choose “map to file system resource”. If you do it right, Chrome will suggest the file you need to choose at the first place.

Map your file in the server with the local file

Now let’s make some changes in the h1 of AppComponent:

The result

Click on app.component.scss to go to the Sources tab, save this file, the browser will reload but your design stays with us 😋. Check your IDE to make sure that the new style rules have been well saved.