Open benjaminforras opened 3 years ago
Hey @TryHardDood
I have tried it with angular but it has an interesting webpack setup which I haven't been able to figure out.
This is as far as I got https://github.com/windicss/windicss-webpack-plugin/blob/feat/angular-example/example/angular/webpack.config.js. It seems like it doesn't pull in the virtual windi file, so will only transform @apply's in css atm.
If you have any experience with it would love a hand.
Hi. As far as I've seen the problem is not on how Angular makes its compilation, but on how Webpack is getting the styles. I've made the following tests:
import 'windi.css';
to the main.ts fileangular,json
file so the architect.build.builder
section looks like:
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"outputs": ["{options.outputPath}"],
"options": {
"customWebpackConfig": {
"path": "./webpack-windi.config.js",
"mergeRules": {
"externals": "replace"
}
},
and the serve.builder
section like:
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
ng serve
So after this I tried to see what was inside this virtual file. For that I used the val-loader webpack plugin, and got the complete windi styles (without cleaning all unused styles).
I'm stuck trying to generate the CSS style file from this virtual file. Hope my findings help at least a bit, we are willing to drop Tailwind in favor of faster build times.
Can someone show me an example when this plugin is being used with Angular & Webpack?