angular / angular/angular-cli

respect wepack export condition for importing

オープン
#27,100 コメント 4 件 リアクション 12 件 担当者 0 名 GitHub で見る
area: @angular-devkit/build-angular devkit/build-angular:browser feature feature: insufficient votes
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
162

説明

### 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.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts の382行目付近から始め、style のインポートがパッケージのエクスポート条件をどのように解決するかを追跡します。パッケージの例を使って build、extract-i18n、serve、test コマンドを実行します。webpack がその条件を選択し、既存の sass、less、style の解決が引き続き機能すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
sass, scss, typescript, webpack
領域
build-system, tooling
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。