1

I have read through a dozen related questions on here about the Angular CLI and global styles, as well as the relevant documentation, but I cannot seem to find how to include a folder of styles.

My project still has the generated styles.scss file. I created the folder src/styles/ and I do not wish to add an SCSS import for every file in that folder (and nested folders). The styles property in angular.json does not appear to support folders or wildcards.

I am migrating a large AngularJS project and we have many global style files. Although some of these files can be replaced with component-scoped styles, quite a few of them are for things like directive attributes and I do not know of any better way to write them.

Is it possible to include a folder of global styles without individual imports for every file?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Sam Claus
  • 1,807
  • 23
  • 39
  • I had similar situation, I solved by putting the folders (including styles) within assets folder – dcg Dec 23 '19 at 20:15
  • @dcg Will that automatically include links to all the contained styles in the HTML? Otherwise that doesn't solve the problem (having to write an include for every file). – Sam Claus Dec 23 '19 at 20:17
  • No, I had to change where the links point – dcg Dec 23 '19 at 20:18

1 Answers1

0

The answer is a firm NO. Due to the nature of CSS cascade, i.e., the order in which styles get included matters, SCSS does not support importing a bunch of files in arbitrary order. You will need to write an import for each individual file so the order is explicit.

Sam Claus
  • 1,807
  • 23
  • 39