"styles":[...] in angular.json not working - json

Question

I have been trying to implement Angular Material in my project and I imported a prebuilt theme in styles.scss. But that didn't work. So I tried to add it to angular.json file but seems that that didn't work out either. Then I finally figured out that whatever added in the "styles":[] in angular.json didn't work in my project(even styles.scss is not working). Does anyone know what might be the issue?
My angular.json file
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"unified-product-assessment": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"outputPath": "dist/unified-product-assessment",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets/"
],
"styles": [
{
"input":"node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.scss"
],
"scripts": [],
"extraWebpackConfig": "webpack.config.js",
"commonChunk": false
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "7kb",
"maximumError": "10kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all",
"extraWebpackConfig": "webpack.prod.config.js"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"configurations": {
"production": {
"browserTarget": "unified-product-assessment:build:production",
"extraWebpackConfig": "webpack.prod.config.js"
},
"development": {
"browserTarget": "unified-product-assessment:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"port": 5000,
"publicHost": "http://localhost:5000",
"extraWebpackConfig": "webpack.config.js"
}
},
"extract-i18n": {
"builder": "ngx-build-plus:extract-i18n",
"options": {
"browserTarget": "unified-product-assessment:build",
"extraWebpackConfig": "webpack.config.js"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
}
},
"cli": {
"analytics": "85c84fd2-00e2-4930-b2a7-4da897f60d34",
"schematicCollections": [
"#angular-eslint/schematics"
]
}
}

Answer 1

Try using this format:
"styles": [
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
Also do not forget to restart the application with ng serve for changes to apply.