Load css file from assets using stylePreprocessorOptions

Question

I have created a folder for CSS files inside my assets directory. I have also added stylePreprocessorOptions in my angular.json. When I am trying to import the css file I keep getting the error that it is not being found.

If I import directly like @import './assets/css/icons.css'; then angular no complaining

I have tried different paths like this but nothing worked "src/assets/styles", "/assets/styles",

styles.css:

@import 'icons.css';

Angular Json:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "switch-candidate": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "css",
                    "skipTests": true
                },
                "@schematics/angular:application": {
                    "strict": true,
                    "skipTests": true
                },
                "@schematics/angular:resolver": {
                    "skipTests": true
                },
                "@schematics/angular:directive": {
                    "skipTests": true
                },
                "@schematics/angular:guard": {
                    "skipTests": true
                },
                "@schematics/angular:pipe": {
                    "skipTests": true
                },
                "@schematics/angular:service": {
                    "skipTests": true
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/switch-candidate",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "assets": ["src/favicon.ico", "src/assets"],
                        "styles": [
                            "src/styles.css"
                        ],
                        "stylePreprocessorOptions": {
                            "includePaths": ["src/assets/css"]
                        },
                        "scripts": [],
                        "allowedCommonJsDependencies": ["crypto-js"]
                    },
                    "configurations": {
                        "production": {
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "500kb",
                                    "maximumError": "1mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "2kb",
                                    "maximumError": "4kb"
                                }
                            ],
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "outputHashing": "all"
                        },
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "extractLicenses": false,
                            "sourceMap": true,
                            "namedChunks": true
                        }
                    },
                    "defaultConfiguration": "production"
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "configurations": {
                        "production": {
                            "browserTarget": "switch-candidate:build:production"
                        },
                        "development": {
                            "browserTarget": "switch-candidate:build:development"
                        }
                    },
                    "defaultConfiguration": "development"
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "switch-candidate:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "assets": ["src/favicon.ico", "src/assets"],
                        "styles": ["src/styles.css"],
                        "scripts": []
                    }
                }
            }
        }
    }
}

Naren Murali · Accepted Answer · 2022-08-24 05:57:57Z

Why don't you just import the css inside the angular.json it will be the same as doing it inside styles.css

Also note to my knowledge you cannot import multiple styles like a glob pattern, instead create a single file called index.css and then import all the files using that single file!

        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "outputPath": "dist/switch-candidate",
                    "index": "src/index.html",
                    "main": "src/main.ts",
                    "polyfills": "src/polyfills.ts",
                    "tsConfig": "tsconfig.app.json",
                    "assets": ["src/favicon.ico", "src/assets"],
                    "styles": [
                        "src/styles.css",
                        "assets/css/icons.css",
                    ],

Collectives™ on Stack Overflow

Load css file from assets using stylePreprocessorOptions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related