Сохранение CSS из JS в Angular 2/Angular -CLI

По умолчанию Angular 2 компилирует CSS в JavaScript, особенно при использовании WebPack, как в Angular -CLI. Я бы предпочел, чтобы это произошло не по нескольким причинам.

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

Есть ли где-нибудь флаг, который я могу установить, чтобы оставить CSS в .css файлах, где принадлежит ИМО?

Ответы

Ответ 1

В этом весь смысл инкапсулированных компонентов.

Компонент должен иметь собственные стили, инкапсулированные вместе с ним, чтобы его можно было отправлять со стилями.

Представьте, что вы хотите опубликовать один из ваших компонентов, который будет использоваться другими, не должен ли он иметь свои собственные стили?

Это означает, что Angular нужен способ связать эти css с компонентом, таким образом разделяя их на куски и вставляя их в главный тег.

Чтобы решить вашу проблему, у вас есть несколько вариантов:

1- Не использовать Emulated Encapsulation:

Компоненты по умолчанию имеют свойство encapsulation, которое настроено на Emulated, вам нужно изменить его на None:

@Component({
   encapsulation:ViewEncapsulation.None
})

Затем вы можете поместить все, что вы css в свой тег заголовка, как вы делали бы с обычной html-страницей.

2- Если проблема связана с темами, вы можете сделать свой компонент тематическим.

У вас может быть атрибут темы для вашего компонента, а затем на основе этого изменить стиль:

@Component({
   selector:'my-component',
   styles:[
    `
       :host{
          [theme="blue"]{

              change what ever you want : 

              h1{
                color:blue; 
              }
           }

       }
    `
  ]
})

И затем, используя этот компонент, будет выглядеть так:

  <my-component [attr.theme]='"blue"'></my-component> // would be blue theme
  <my-component></my-component> // would be default

Ответ 2

Перейдите в свой базовый Html файл (где загружается корневой модуль, основное приложение) и свяжите стили CSS в разделе заголовка.

Webpack не будет включать его в скомпилированный/комбинированный файл css, который вводится на страницу. Файл css по-прежнему будет включен во время выполнения в браузере.

<html>

<head>
  <base href="/">
  <meta charset="utf-8">
  <title>dummy</title>
  <meta name="viewport" content="width=device-width">

//was not injected/modified by webpack
  <link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png">

//webpack injected this below from other components imported/inline css rules
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>

Ответ 3

Я также использую angular -cli (v1.0.0-beta.22). Когда я готов построить для производства, я запускаю следующую команду:

ng build -prod -aot

Это генерирует все мои готовые к производству файлы (в комплекте, дрожание деревьев и минирование и т.д.). Особо следует отметить, что он будет генерировать две версии таблиц стилей.

Один из js:

styles.b2328beb0372c051d06d.bundle.js

И другая версия - простой css:

styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css

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

Я также попробовал сборку с компиляцией JiT:

ng build -prod

Он также выпустил исходную/уменьшенную версию таблицы стилей CSS.

Теперь я точно знаю, что следующее НЕ работает:

ng build

Это создаст все css, встроенные в js файл, styles.bundle.js.

Поскольку вы хотите использовать исходный файл css во время разработки, единственным обходным решением, о котором я могу думать, является то, что вы запускаете ng build -prod, чтобы получить файл css. Скопируйте/вставьте это вручную в свою папку с ресурсами. Запустите "format" в файле, чтобы развернуть файл. Затем выполните обычную сборку с измененным файлом index.html, ссылающимся на ваш исходный файл css, и удалив ссылку styles.bundle.js script. Не очень, но это может сработать.

Ответ 4

Поместите класс оболочки в html example- <div class="component-1-wrapper"> all yout html here inside component-1-wrapper </div>
Стройте свой sass (scss) следующим образом. Поскольку ваши стили завернуты в оболочку компонента-1, , поэтому он будет применяться только к компоненту-1-wrapperclass .component-1-wrapper{ // all the styles for component-1 here .class-hello{ // styles } }
Вы можете скомпилировать свой css с sass и поместить все css (разделенные модулями) в отдельную папку. Начать имена файлов с помощью _, sass может их импортировать:

Вы можете ссылаться на свои стили-main.scss в файле app.ts @component({ styleUrls:['styles/styles-main.scss']})
Таблицы стилей будут структурированы таким образом, и стили отдельных классов компонентов будут применены к конкретному компоненту, поскольку в html-классе есть класс-оболочка

Надеюсь, что это поможет!!!!!!