Как использовать глобальные CSS в не связанных с проектом?

Question

У меня ASP.NET MVC в качестве сервера и Angular в качестве клиентского приложения.

У меня нет статического index.html, но это index.cshtml. Стили, которые я использую, являются глобальными стилями, а не компонентами.

Мой вопрос: как мне работать с файлом стилей scss (связкой) с angular / webpack и MVC?

Нужно ли вручную импортировать «глобальные файлы стилей» в файл app.component? Я делаю то же самое для CSS-файлов поставщика, таких как начальная загрузка?

Какая лучшая практика? Я думаю о чем-то следующем:

    import { Component } from '@angular/core';

    import '../styles/myglobalStyles.css'
    import '../styles/boostrap.min.css'
    import '../styles/otherVendors.min.css' 

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html'
    })
    export class AppComponent { }

Другой вопрос в настройке ANGULAR CLI, что нужно сделать, это добавить следующее в angular-cli.json файл. Что оно делает? Добавляет ли он файл styles.css в app.component.html во время сборки? (Можете ли вы указать на какой-либо источник / документацию?)

],
"styles": [
   "src/styles.css"
],

Answer 1

Вы должны использовать webpack для связывания всех файлов scss и преобразования всех файлов scss в css, затем извлечь их в файл lib.css, а затем включить его в Layout.cshtml, так как это глобальный стиль для вашего приложения. Может быть, для улучшения вы можете использовать что-нибудь стороннее lib для улучшения вашего CSS-кода, а также для повышения производительности

Приветствия

Answer 2

стили, на которые ссылаются метаданные styleURL стиля компонента, встроенные в шаблон компонента или импортированные в компонент, включают инкапсуляцию CSS, что означает, что они ограничены отдельным компонентом для предотвращения коллизий.

@Component({
  selector: 'comp',
  templateUrl: './comp.component.html',
  styleUrls: ['./comp.component.css']
})

стиль области док https://angular.io/guide/component-styles#style-scope

Чтобы создать глобальные правила стилей, которые будут применяться к любому элементу, вы можете добавить дополнительные файлы стилей, включая css vendor, в agular.json, который будет упакован веб-пакетом (который встроен в cli) и связан с индексом. HTML.

добавить его в массив стилей в angular.json:

"styles": [
  "styles.css",
  "../styles/boostrap.min.css"
],

см. Документы по конфигурации рабочего пространства для угловых https://angular.io/cli#workspace-and-project-configuration