Angular 6 Load CSS Folders in Angular.JSON

Angular 6 load css folders in angular.json

In angular 6 you have to add only in src/style.css (instead angular.json):

@import "assets/plugins/listtyicons/style.css";
@import "assets/plugins/jquery-ui/jquery-ui.min.css";
@import "assets/plugins/bootstrap/css/bootstrap.min.css";
@import  "assets/plugins/plugins/isotope/isotope.min.css";

And in angular.json

"styles": [
          "src/styles.css"
        ]

Load css file from assets using stylePreprocessorOptions

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",
                    ],

How to @import CSS file in Angular?

If you want to point to a css/scss file within a component, you can add a shortcut to your styles folder in your angular.json in the options node like so :

        "my-app": {
            "root": "...",
            "sourceRoot": "...src",
            "projectType": "application",
            "architect": {

                "build": {
                    [...]
                    "options": {
                        [...]
                        "stylePreprocessorOptions": {
                          "includePaths": [
                            "projects/my-app/src/styles" // path to your styles folder
                          ]
                        }
                    }
                    
                },

            }
        },

Then, whenever you use @import "...";, it will start from the css folder, so you can use @import "theme.scss";

How to add custom CSS files globally for angular 6 project

1: Configure angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

2: Import directly in src/style.css or src/style.scss:

@import '~bootstrap/dist/css/bootstrap.min.css';

Alternative: Local Bootstrap CSS
If you added the Bootstrap CSS file locally, just import it in angular.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

or src/style.css:

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

I personally prefer to import all my styles in src/style.css since it’s been declared in angular.json already.

Angular 6 : How to use css and js files from cshtml pages of mvc into Angular project

Assets aren't magical, they need to be declared as such.

Open your angular.json file. Find the path

projects.YourProjectName.architect.build.options.assets

And from there, add your declared folder in it. It should keep the assets up when the project is complied.

Angular styleUrls directory instead of files

Create a constants.ts inside that you can do something like this.

constants.ts

export const CONSTANTS = {
    STYLES_SHARED:[
    'styles/test.css',
    'styles/test2.css',
    'styles/test3.css',
    'styles/test4.css',
    'styles/test5.css',
    'styles/test6.css',
    'styles/test7.css',
    'styles/test8.css',
  ]
};

Then import this constants whereever you want to prevent code duplication.

styleUrls: CONSTANTS.STYLES_SHARED

method 2:

If these styles are shared by every component in your angular project, please add the css files to your angular.json, they will be included for all files!

styles": [
  "src/styles.css",
  "src/more-styles.css",
  { "input": "src/lazy-style.scss", "inject": false },
  { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
]

reference here: angular docs

---

Related Topics