Angular cli: include angularjs component styles in ngUpgrade hybrid project

447 Views Asked by At

Now I'm moving to a hybrid angular/angularjs project. But I stuck with import styles problem.

For example, my simple angularJs component:

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

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

export const SimpleComponent = {
  template,
  controller
};

I expect that styles will be extracted and included in the project. Before I switched to the angular-CLI all magic works because of 'MiniCssExtractPlugin'.

If I create angular components:

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

All styles add correct. The same, if I it with angular.json ->

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

Now I suggest 2 ways to solve the problem (first doesn't work, second will be in a pinch):

1) Add "extractCss":true rule in angular.json -> projects.projectName.architect.serve.options. But it doesn't work. I create issue on github about "extractCss" option. But maybe I don't understand what exactly "extractCss" option means, and delegate 'MiniCssExtractPlugin' plugin functionality to it?

2) Create 'app.less' in 'src/app' folder and add all component styles to it. After that include it to 'angular.json' -> "styles": ["src/app/app.less"]. But it takes a lot of overhead because we have a lot of components =)

Thank you for attention =)

0

There are 0 best solutions below