Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where to Put Common CSS in Angular

Tags:

css

sass

angular

I've been looking at the project structure in the Angular style guide (angular.io). Everything they recommend seems to make sense, but I'm confused about 1 thing: where would you put common CSS in this structure?

By common CSS, I'm talking about things like Sass partials that you want to import into multiple other CSS files. Or even for the HTML, too, if you are using a template language.

like image 883
tsmith18256 Avatar asked Oct 20 '16 01:10

tsmith18256


People also ask

Where can you place CSS to be used by your form in Angular?

Global CSS — The Way You're Used To Angular components can be styled via global CSS the same as any other element in your application. Simply drop a `<link>` element on your page (typically in index. html) and you're good to go!

Where should CSS files be placed?

To create an internal stylesheet, you place CSS inside a <style> element contained inside the HTML <head> . In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files.

Where do I put stylePreprocessorOptions?

Go to angular. json file, under styles add stylePreprocessorOptions object with includePaths option and define all paths available in an array with your file paths, it should be relative to the angular.


1 Answers

If you create your project using angular cli you will find a file styles.css under src folder. Put all your common styles in this file.

.angular-cli.json file mentions this file to be bundled as a style

"styles": [
        "styles.css"
      ],
like image 189
Souvik Basu Avatar answered Oct 01 '22 14:10

Souvik Basu