CODEWITHSUNDEEP
angularstylesheet
Adil
Adil

Reputation: 172

How can we use external style sheets in angular projects?

How to include the external style sheets in angular projects and use them in different components. Can anyone tell me the whole procedure of including the style sheet.

I am trying to use the custom built template in my angular project. I have all the code(HTML ,css) but i can't add or import all of the code in my angular project specially css.

Upvotes: 0

Views: 1043

Answers (2)

Ayoub k
Ayoub k

Reputation: 8868

in assets folder add a folder named css and put all your css file inside it.
after that in the styles.css file (that file exist inside src folder) add imports to your css files: 

/* You can add global styles to this file, and also import other style files */

@import "assets/css/name_of_file.css";

Upvotes: 0

Goku
Goku

Reputation: 1663

You can over write the styles.css file in the projectname/src/ directory.

Or you can add the styles file in question (somename.css) to the angular.json file in the styles array

"version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "somthing": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }

Upvotes: 1

Related Questions