Angular cli:包括ngUpgrade混合项目中的angularjs组件样式

Val*_*inK 6 angularjs angular-cli ng-upgrade angular

现在我转向混合角度/ angularjs项目.但我坚持导入样式问题.

例如,我的简单angularJs组件:

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

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

export const SimpleComponent = {
  template,
  controller
};
Run Code Online (Sandbox Code Playgroud)

我希望样式将被提取并包含在项目中.在我切换到angular-CLI之前,由于' MiniCssExtractPlugin ',所有魔法都有效.

如果我创建角度组件:

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

所有款式都添加正确.同样的,如果我用angular.json - >

(path) projects.projectName.architect.build.options.styles 
"styles": [ "src/assets/styles/index.less" ]
Run Code Online (Sandbox Code Playgroud)

现在我建议2种解决问题的方法(第一种方法不起作用,第二种方法可以解决):

1)添加"extractCss":true规则angular.json -> projects.projectName.architect.serve.options.但它不起作用.我创建问题关于GitHub的"extractCss"选项.但也许我不明白"extractCss"选项究竟意味着什么,并将"MiniCssExtractPlugin"插件功能委托给它?

2)在'src/app'文件夹中创建'app.less'并向其添加所有组件样式.之后将其包含在'angular.json' - >"styles"中:["src/app/app.less"].但它需要很多开销,因为我们有很多组件=)

谢谢关注=)