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

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

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

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

источник

2016-12-11 Amy Blankenship

http://www.stackoverflow.com/q/40761076/854556 –

Кто-нибудь, кто-нибудь? –

Интересный вопрос. Я только начинаю с Angular 2, но вы не можете использовать стиль Urls? –

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

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

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

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

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

1- Не используя ЭМУЛИРОВАННЫЙ Encapsulation:

компоненты по умолчанию имеют свойство называется инкапсуляцией, который установлен эмулировать, вам необходимо изменить это None:

@Component({ 
    encapsulation:ViewEncapsulation.None 
})

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

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

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

@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

источник

2016-12-20 21:51:49 Milad

Я думаю, что вариант использования, в котором вы хотите, чтобы компонент всегда выглядел одинаково независимо от того, что намного реже, чем вы хотите способный полностью менять CSS, заменяя CSS-файл (это то, что CSS делает хорошо). Я считаю, что это действительно странное дизайнерское решение, которое ставит приоритеты в отношении крайних случаев при нормальном использовании в реальном мире. Проблема с размещением всего в главном теге заключается в том, что он не будет обновляться на основе стиля, указанного в компонентах, находящихся на экране. Если вы когда-либо использовали угловые маршруты в AngularJS, это ближе к тому, что я ожидал бы. –

Нет, сир, мир идет по компонентам, вам действительно нужно определить определение компонента!Я думаю, вы хотите JQuery, а не Angular2 – Milad

Я думаю, что Angular 2 не будет полезен, если только люди, желающие его использовать, - разработчики, публикующие свои компоненты друг на друге. Принцип CSS Zen Garden очень распространен и по какой-то причине. –

Перейдите в свой базовый файл 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's injected this below from other components's imported/inline css rules 
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>

источник

2016-12-15 23:04:43 deek

И как это будет работать, чтобы обеспечить CSS для отдельного компонента? –

правила будут по-прежнему действительны/работают ..... но доступны по всему миру. Не проблема, если вы не используете перекрывающиеся имена для классов css. – deek

Я думаю, что, скорее всего, я это сделаю. Исходя из школы мысли «CSS Zen Garden», я не понимаю всю философию CSS в Angular 2. –

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

нг сборка -prod -aot

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

Один в ЯШ:

styles.b2328beb0372c051d06d.bundle.js

И еще одна версия обычная CSS:

styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css

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

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

нг сборка -prod

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

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

нг построить

Это произведет все CSS встраиваемыми в JS-файла, styles.bundle.js.

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

источник

2016-12-20 03:05:11 brando

Я не буду следить за тем, как это будет угловато от посещения стиляUrl и сосать его как JavaScript и заставить его создать тег стиля вместо этого? –

Появилась новая версия углового кли. Он может решить эту проблему: https://github.com/angular/angular-cli/pull/3511 – brando

-1

Помещенный класс оболочки в 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 с дерзостью и поставили все CSS (разделенные модули) в отдельной папке. Начало имена файлов от _, дерзость их можно импортировать:

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

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

источник

2016-12-21 17:48:43 shaunak1111

С угловым-кли 1.6.5 вы можете сделать это:

ng serve --extract-css

Вы все еще будет иметь особенности стиля-инкапсуляцию, но теперь DevTools будет указывать на компонент исходного файла CSS.

источник

2018-02-23 14:11:42 nilsel

Это может быть комментарий. – Striped

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

ответ

Смежные вопросы