angular / angular/angular-cli

respect wepack export condition for importing

Aperta
#27,100 4 commenti 12 reazioni 0 assegnatari Vedi su GitHub
area: @angular-devkit/build-angular devkit/build-angular:browser feature feature: insufficient votes
Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
14h 23m
PR unite (30g)
162

Descrizione

### Command

build, extract-i18n, serve, test

### Description

The root problem I am trying to solve is the different import behavior of esbuild and webpack for url resources like described here ( https://github.com/angular/angular-cli/issues/24470 ).

We have a npm package shipping company fonts and scss file to import them.

I know that there are other possibilities, but I also discovered that we could have different entrypoints for webpack and esbuild
when using conditions in the package.json as described here: https://webpack.js.org/guides/package-exports/#conditions-preprocessor-and-runtimes.

This was leading me to this package.json
```json
"exports": {
"./styles/*": {
"webpack": {
"sass": "./dist/styles/webpack/*.scss",
"less": "./dist/styles/webpack/*.less",
"style": "./dist/styles/webpack/*.css"
},
"sass": "./dist/styles/*.scss",
"less": "./dist/styles/*.less",
"style": "./dist/styles/*.css"
},
"./*": "./dist/fonts/*"
}
```

The only problem here is, that this does not work. Webpack is loading the normal sass styles.

### Describe the solution you'd like

It would be really cool if the webpack condition is matched.

### Describe alternatives you've considered

We could offer a scss variable so that consumers can override the font path or just casually export the file. This still does not solve the problem when using esbuild and the karma runner but at least they could do something.

I am not sure how much effort it is fixing this, but in case you just need to add `webpack` here: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts#L382 it would be really cool if you could do it.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia da packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts intorno alla riga 382 e segui il modo in cui gli import di style risolvono le condizioni di esportazione dei package. Esegui i comandi build, extract-i18n, serve e test con l'esempio di package; il lavoro è completato quando webpack seleziona la sua condizione e la risoluzione esistente di sass, less e style continua a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
sass, scss, typescript, webpack
Ambito
build-system, tooling
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.