Angular cli: включить стили компонента angularjs в гибридный проект ngUpgrade - PullRequest
Новая
       43

Angular cli: включить стили компонента angularjs в гибридный проект ngUpgrade

0 голосов
/ 20 ноября 2018

Теперь я перехожу к гибридному проекту angular / angularjs.Но я застрял с проблемой стилей импорта.

Например, мой простой компонент angularJs: 

import template from './simple.html';
import controller from './simple.controller.js';

import './simple.less'; // <-- Look at

export const SimpleComponent = {
  template,
  controller
};

Я ожидаю, что стили будут извлечены и включены в проект.До того, как я переключился на угловой CLI, все волшебство работает из-за ' MiniCssExtractPlugin '.

Если я создаю угловые компоненты: 

@Component({
  selector: 'app-simple',
  templateUrl: './simple.html'
  styleUrls: ['./simple.less']
})

Все стили добавляются правильно.То же самое, если я это сделаю с angular.json -> 

(path) projects.projectName.architect.build.options.styles 
"styles": [ "src/assets/styles/index.less" ]

Теперь я предлагаю 2 способа решения проблемы (первый не работает, второй будет в крайнем случае):

1) Добавьте "extractCss":true правило в angular.json -> projects.projectName.architect.serve.options.Но это не работает.Я создаю Issue на GitHub о "extractCss" вариант.Но, может быть, я не понимаю, что именно означает опция "extractCss", и делегирую ей функциональность плагина MiniCssExtractPlugin?

2) Создайте app.less в папке «src / app» и добавьте в нее все стили компонентов.После этого включите его в 'angular.json' -> "styles": ["src / app / app.less"].Но это требует больших накладных расходов, потому что у нас много компонентов =)

Спасибо за внимание =)

...