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 =)