Приветствую всех!
Сейчас я занят переводом на гибридный angular/angularjs проект. И столкнулся с проблемой импорта стилей.
К примеру, простой angularJs компонент:
import template from './simple.html';
import controller from './simple.controller.js';
import './simple.less'; // <-- Look at
export const SimpleComponent = {
template,
controller
};
В данном случае я ожидаю, что стили будут извлечены из файла, а потом добавлены в проекты. До перехода на angular-cli вся магия работала из-за 'MiniCssExtractPlugin'.
Если я пишу компоненты на angular:
@Component({
selector: 'app-simple',
templateUrl: './simple.html'
styleUrls: ['./simple.less']
})
То все стили добавляются корректно. Так же, если я добавляю стили через:
angular.json -> (путь) projects.projectName.architect.build.options.styles
"styles": [ "src/assets/styles/index.less" ]
То стили тоже подхватываются.
Сейчас я вижу 2 пути решения проблемы (1-ый не работает или я его неправильно понял, второй буду использовать на самый крайний случай):
1) Добавить "extractCss":true опцию в angular.cli -> projects.projectName.architect.serve.options. Но это не работает. Я открыл вопрос на github об "extractCss" : . Но может я в действительности не понимаю, что "extractCss" значит, и по ошибке делегирую ему функциональность 'MiniCssExtractPlugin'?
2) Создать 'app.less' в 'src/app' папке и добавить все стили компонентов туда через '@import' less-а ,т.е :
@import './main/components/simple/simple.less';
@import './main/components/awesome-input/awesome-input.less';
@import './main/components/awesome-button/awesome-button.less';
@import './main/components/awesome-scroll/awesome-scroll.less';
...
После этого добавить этот файл в
angular.json -> (путь) projects.projectName.architect.build.options.styles
"styles": [ "src/app/app.less" ]
Но в данном случаю думаю, что для данной задачи это оверхеад, и я упускаю какую-то деталь.
Благодарю вас за внимание)
Средний