hey guys so in this tutorial we're gonna look at how to use CSS preprocessors
like sass or less with angular CLI and if you have already have a project
running where you're just not using any pre-processors and you want to start
using it so how to configure it easily so that you can use these preprocessors
and welcome to techsith tutorials. hey guys also if you haven't subscribed to
my channel yet you can do so by clicking on the subscribe button and also you can
click on this notification button so you can get the latest notification so let's
first start with sass let's say if you want to create a brand new project where
you want to use sass as a preprocessor you would do like this so let's create a
project using angular CLI so it's a ng new and the name of the project is let's
say ng 5 - sass and you would have to use an extra parameter here style equal
to SCSS so that's the file extension for sass and it does have two extension
either as a SCSS or SASS which was old one so I usually use s CSS so when I do
that it would create a new project which where you would see it's already using
SCSS a default preprocessor alright so it has created a project now let's look
at what it has changed to make it work with sass so the first thing we're going
to do is this .angular-CLI.JSON file first thing you would notice within this
default property you would have this style ext which is s SCSS so it's set
is this also you would see that under the source file instead of style.css you
would have now styles.SCSS and within each component so by default when
you create a project with angular CLI it Chris one component which is APP
component and usually it has app. component.css but instead now you
have app.component.scss and also you would notice that app component es when
you open it the style URL has reference to app.component.SCSS instead of CSS
nor is this for things so just thing is if you have a change sass to something
else you you need to change all of those references alright so now let's add some
code and make this work and see how it works so first what I'm gonna do I'm
gonna go to app component HTML and move everything that the angular CLI created
in app component and I'm going to create an h1 h1 tag and inside I would say "this
project is to sassy " alright alright so the the style dot a CSS which is under
this the source folder is actually considered as a global sass file so here
whatever I put in here will be applied globally so the first thing I'm gonna do
as you can see you would know that you can create variables in sass so you can
create a variable for like color so let's say for font color I can say I'm
gonna use a simple color let's say red usually I don't use red blue I mean I
use proper colors but for this tutorial it's easy to see these colors you know
instead of some some code and for the background color color
I'm just gonna say blue so the page is gonna look very ugly and because it's
global I can have a body tag here and this body tag would have color which
will be font color so I can use this font color and so the the font color
it's gonna be a red and background color it's going to be this $background-color
which is blue all right so now let's save all of it and run the project so
I'm gonna run the project using angular CLI so ng serve - - open - - port I'm
gonna open in the port 5000 because I have another product running on another
port alright so it renders this blue background and ugly and red fonts
alright but the thing is you don't want to have the variables and the styles in
the same finally what you want to do is move this in a separate file so you can
reuse it and import it in a another sass file so if you want to but I don't want
them here under the source folder so what I'm gonna do is I'm gonna create
another folder called scss and I'm going to move this styles.scss into a SCSS so now
that I have it inside here the reference that I had before inside the where is that
file the angular CLI update Jason here I have styles refer to this root folder
inside the source so instead now I have to say SCSS / so this
change you have to make so that it's it's gonna look in this folder okay so now that is
moved we're gonna split into two files so I'm going to create another file inside
the sass folder underscore _vars.scss usually if you create like a
common sass file that you can include another sass file you want to use it
underscore in front so the pre process will already know how do work so now
what I'm gonna do this is gonna copy this to line and move it from here and
I'm gonna move it here and inside the styles.scss I need to now
import it so it's a import and all I have to do is wash yeah I don't have to
use underscore here because it knows I also don't have to use SCSS extension
here because it knows so what they do is this two and it should work like a charm
the project started running compiled and it works fine alright now what about the
the CSS file within a particular component the the one that is outside
inside s at a CSS folder it's actually global applies to the entire project but
the one that is inside the app folder it's a scoped CSS and we're gonna look
at how it scope and global works but the scoped one it only applies to the app
component it does not impact it doesn't bleed into the other the rest of the
project so what I'm gonna do is in the app component I'm going to create
another tag called h2 tag in the app component SCSS file I'm going to
import this of our it's used for a common purpose I can import it here and
the way I would do is import and I could use tilde which means the
source folder and I can say SCSS/vars again I don't have to use the CSS
or underscore here so I have imported this wash and I'm going to create
another variable here dollar let's say other color and I'm going to say which
is gonna be ffff here I'm gonna style the h2 tag and when I use colour is the
$other-color all right so now if I look at it the compiled project this is white
here now let's look at how it actually scoped CSS really works right so fine
inspect this h2 tag I can see that it has the color is a white here and if I
click on the style here here instead of saying just h2 it's adding some
attribute so it actually added if I inspect this element it added some
some attribute we would call _ng-content -c0 now this could be
different for for you because it's automatic generated but what it does it
it will reflect this would reflect inside the scope CSS which was for app
component and so if I have another h2 element somewhere else that is outside
this app component it would not impact it so that's why it's scoped however the
the one that that was outside that is actually global and as you can see there
is no attribute or class or anything here again there's much more to learn
in terms of sass but this is not a sass tutorial this is how to use sass with
angular and which I have done it so now let's move on to how to convert this
project to a less project first let's say if you want to create a brand new
project to use less with you can simply do this just like we did with sass you
can say ng new name the project would be let's say ng5-less and you can
provide style equal to less and this should create a new project but what
we're gonna do instead of doing this we're gonna convert our current project
which is in sass into less project so this way you can understand if you want
to transform one to a preprocessor angular-CLI.json at the end here style
ext which is s CSS so what I'm gonna do I'm gonna change this property here so
this will prompt this project would use less instead of sass then even if you if
you're not interested in less I think you should know this because just in
case if you have to change from one preprocessor to another so the command
is basically $ng set defalts.styleExt less so this
property here I'm trying to set default.styleExt when I run this it changes
it to less but that's not the only thing you need to do there are many other
things you have to do so that it would be compatible with less so again if I go
back to the angular CLI not Jason the first thing I want to do is here instead
of SCSS/styles.SCSS I'm just going to change this to less/styles.less
okay and I'm gonna change the name of the folder and I need to also change
the file extension so rename each file and this one too I also need to change
this file inside the app the app component.SCSS file and again the
app.component.TS still has a reference to app component SCSS so I
need to change that to also less alright but there's still the product won't work
because I have the less here but if the inside the format is still actually sass
so I need to change this to @ sign remember let's use this @ sign and not
the $ sign so if I did this it what should work and the styles here I have
to change the reference as well and inside here I have to also do this
alright so hopefully that should be it now let's run the project and hopefully
sure I'm just gonna keep my fingers crossed
usually there is something that is missing you know oh yeah so one more
thing was inside this app.component.SCSS so instead I need less and I think
I might have to do the same thing well here it works fine so now I think it
should work hopefully alright so it is working and
again let's say if I want to go back to pure CSS and don't want less or sass
preprocessor I would have to do the same same thing again I would have to change
the .angular-CLI.Json and here default.styleext have to change this to
CSS and then I have to make all the changes
that I made for you know when I moved from SCSS to less yeah so it's quite
painful but you know there's no automatic way to do this so you have to
manually do it but you need to be make you need to make sure if it's a much
larger project it's a quite a bit of change actually and I'm gonna upload
this code to my github site so you can actually look at it and play around with
it I might create an article on techsith.com so that some of the code here you
can just copy and paste if you want to and so more detail there and I'll put up
provide the links to in the description so you can look at it hey guys I hope
you learned something from this tutorial and if you did please you can help
three ways you can either you know always like subscribe and provide a nice
comment you can support me on the all the site patreon and you can translate
this video I'll provide a detail in the description it's very easy you can use
Google Translate or something and thank you