Capalility of angular boilerplate with miniCssExtractPlugin

[WebKieth]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

I tried to reproduce it on angular 7.2 and got error on dev build. For angular 8 this error throws only for build --eot

Description

Copy from: webpack-contrib/mini-css-extract-plugin#438
I want to use angular with tailwind css and their @apply custom rule. This rule dont work as expected after installing tailwind for angular. Tailwind requires to add it by custom webpack config with minifying all component styles with tailwind inside one bundle. With my current config this @apply works properly now, but ahead of time compiler says hurtful things....

🔬 Minimal Reproduction

Clone this repo and try to build with aot.

🔥 Exception or Error

ERROR in Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read property 'replace' of undefined

🌍 Your Environment

Operating System: Ubuntu 18.04
Node Version: 10.15.3
NPM Version: 6.4.1
webpack Version: 4.39.1
mini-css-extract-plugin Version: ^0.8.0

[alan-agius4]

Hi @WebKieth, I just downloaded your reproduction and I cannot seem to replicate the error you are experiencing.

> [email protected] ng /workspace/ngwindy-layout
> ng build --aot                                                                                                                                                                           
chunk {main} main.js, main.js.map (main) 28.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 148 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 446 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 20.9 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.46 MB [initial] [rendered]
Date: 2019-08-08T16:39:02.374Z - Hash: b5367525886733c14c6b - Time: 9234ms

[WebKieth]

@alan-agius4 sorry, I just found working solution with clean postcss-cli commands and merged it with master. Now it's revetred. Pls, try again.
https://github.com/WebKieth/ngwindy-layout/tree/master
UPD: and my solution is dirty. (same repo, branch: feature/postcss_merged) I removed styleUrl from component.ts (so i cant use scoped) and sets control by scss files in app by postcss cli command with watcher.
So, postcss check changes in all component styles (with tailwind directives, which has been transpiled to clean scss) and compile it into main.scss into src, which setted globally into angular.json. Main.scss changes and trigger to recompile itself by angular cli.
So angular and postcss works in one project, but dont know about each other.

[alan-agius4]

Hi @WebKieth, looking at the reproduction you are using a custom builder and webpack config.

This means that you will need to implement the logic on how to handle global and component styles yourself. Only global component styles can be extracted using miniCssExtractPlugin, since component styles will be inlined in the JS bundle.

If you want to take a look on how to handle global styles and component styles differently you can check: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

This really doesn't seem to be a bug in the CLI, but more of an issue with your custom webpack config. The latter is not something that we support and hence I'd suggest to repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}