Как мы можем использовать внешние таблицы стилей в угловых проектах? - PullRequest
Новая
       14

Как мы можем использовать внешние таблицы стилей в угловых проектах?

0 голосов
/ 04 сентября 2018

Как включить внешние таблицы стилей в угловые проекты и использовать их в разных компонентах. Может кто-нибудь сказать мне всю процедуру включения таблицы стилей.

Я пытаюсь использовать пользовательский шаблон в своем угловом проекте. У меня есть весь код (HTML, CSS), но я не могу добавить или импортировать весь код в мой угловой проект, особенно CSS.

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

в папке assets добавьте папку с именем css и поместите в нее все свои css-файлы.
после этого в файле styles.css (этот файл существует в папке src) добавьте импорт в ваши css-файлы: 

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

@import "assets/css/name_of_file.css";
0 голосов
/ 04 сентября 2018

Вы можете перезаписать файл styles.css в директории projectname / src /.

Или вы можете добавить соответствующий файл стилей (somename.css) в файл angular.json в массиве стилей 

"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"
                }
              ]
            }
...