Check out our Angular Book Series.

How do I modify an existing Angular6 Project to use SASS?

If you haven't done so already, you may want to read last week's post about generating an Angular 6 project to use SASS instead of regular CSS files. There is a ton of documentation out there on how to do this for Angular 5 or before and they direct you to use ng set to modify the Angular config file. None of that works for Angular 6, because the

get/set have been deprecated in favor of the config command.

I had two problems. First, I found the documentation on how to use the config command a bit lacking. Second, you already have to know the properties you want to change before you can use the command.

Create a new project that is set to use SCSS and you'll find something like this:


"projects": {
"myAppSetToUseCSS ": {
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
....

This is what we want to create in our SASS-free project. Here is the command to add it to a new project:


ng config projects.myAppNotSetToUseCSS.schematics.@schematics/angular:component.styleext scss

You won't get a command line response, but your angular.json will not be updated.

If you want to CSS files that were already modified, you'll have to change them on your file system--and any code that references them such as a @component metadata. Be sure to open up the angular.json file and change the other defaults:


"projects": {
"myAppNotSetToUseCSS": {
"architect": {
"build": {
"styles": [
"src/styles.scss"
],
"test": {
"options": {
"styles": [
"src/styles.scss"
],
....

Those are the only two references to the default styles folder for the main project, but be sure to do a file search through your Angular.json file just to make sure.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.