Angular styleUrls directory instead of files-CodePudding

I currently paste all the stylesheets of my style folder into styleUrls. Is there a way not to hardcode those Urls and do it dynamically? For example: use all stylesheets of the directory ./styles/

styleUrls: ['./styles/]

CodePudding user response：

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