使用 Angular 13 以及ng-packagr當我們使用庫發布 SASS 混合時，我們需要將庫添加到匯出中，package.json并assets在ng-package.json.
這些是說明。
https://github.com/ng-packagr/ng-packagr/blob/main/docs/copy-assets.md
并且在這個問題中也有解釋： Tilde ~ in SCSS @use statement no longer resolve to node_modules as of Angular 13
所以我已經為這個專案做到了： https ://github.com/fireflysemantics/big-packaged-component-example
這是ng-package.json配置：
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/big",
"assets": [
"./src/CHANGELOG.md",
"./src/lib/**/*.theme.scss"
],
"lib": {
"entryFile": "src/public-api.ts"
}
}
這是package.json配置：
{
"name": "@fireflysemantics/big-packaged-component-example",
"version": "0.0.7",
"exports": {
".": {
"sass": "./src/lib/big.component.theme.scss"
}
},
"peerDependencies": {
"@angular/common": "^13.3.0",
"@angular/core": "^13.3.0"
},
"dependencies": {
"tslib": "^2.3.0"
}
}
該專案可以使用 NPM 安裝：
npm i @fireflysemantics/big-packaged-component-example
我已經將它安裝到一個測驗專案中： https ://github.com/fireflysemantics/t/blob/master/src/styles.scss
我正在嘗試使用宣告匯入已發布的主題：
@use "@fireflysemantics/big-packaged-component-example/big.component.theme" as theme;
但是它錯誤：
$ ng build
? Browser application bundle generation complete.
./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
?
3 │ @use "@fireflysemantics/big-packaged-component-example/big.component.theme" as theme;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
?
src/styles.scss 3:1 root stylesheet
./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
?
3 │ @use "~@fireflysemantics/big-packaged-component-example/big.component.theme" as theme;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
?
src/styles.scss 3:1 root stylesheet
at tryRunOrWebpackError (/Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/HookWebpackError.js:88:9)
at __webpack_require_module__ (/Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:5049:12)
at __webpack_require__ (/Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:5006:18)
at /Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:5077:20
at symbolIterator (/Users/oleersoy/Temp/sandbox/t/node_modules/neo-async/async.js:3485:9)
at done (/Users/oleersoy/Temp/sandbox/t/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/Users/oleersoy/Temp/sandbox/t/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/oleersoy/Temp/sandbox/t/node_modules/tapable/lib/Hook.js:18:14)
at /Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:4984:43
at symbolIterator (/Users/oleersoy/Temp/sandbox/t/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
?
3 │ @use "~@fireflysemantics/big-packaged-component-example/big.component.theme" as theme;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
?
src/styles.scss 3:1 root stylesheet
at Object.<anonymous> (/Users/oleersoy/Temp/sandbox/t/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!/Users/oleersoy/Temp/sandbox/t/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!/Users/oleersoy/Temp/sandbox/t/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!/Users/oleersoy/Temp/sandbox/t/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!/Users/oleersoy/Temp/sandbox/t/src/styles.scss:1:7)
at /Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
at Hook.eval [as call] (eval at create (/Users/oleersoy/Temp/sandbox/t/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (/Users/oleersoy/Temp/sandbox/t/node_modules/tapable/lib/Hook.js:14:14)
at /Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:5051:39
at tryRunOrWebpackError (/Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/HookWebpackError.js:83:7)
at __webpack_require_module__ (/Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:5049:12)
at __webpack_require__ (/Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:5006:18)
at /Users/oleersoy/Temp/sandbox/t/node_modules/webpack/lib/Compilation.js:5077:20
at symbolIterator (/Users/oleersoy/Temp/sandbox/t/node_modules/neo-async/async.js:3485:9)
Generated code for /Users/oleersoy/Temp/sandbox/t/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!/Users/oleersoy/Temp/sandbox/t/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!/Users/oleersoy/Temp/sandbox/t/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!/Users/oleersoy/Temp/sandbox/t/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!/Users/oleersoy/Temp/sandbox/t/src/styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n ?\n3 │ @use \"~@fireflysemantics/big-packaged-component-example/big.component.theme\" as theme;\n │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n ?\n src/styles.scss 3:1 root stylesheet");
有任何想法嗎？
更新
因此，如果我重命名big.component.theme.scss為index.scss并將package.json匯出更改為：
"sass": "./src/lib/index.scss",
并像這樣匯入：
@use "@fireflysemantics/big-packaged-component-example/" as theme;
它可以作業......但是否需要命名scss檔案index？
在存盤庫上還詢問了這個ng-packagr：
https://github.com/ng-packagr/ng-packagr/issues/2337
uj5u.com熱心網友回復：
sass 決議器用于ng-packagr并@angular-devkit/build-angular:browser支持包匯出。簡而言之，這意味著您無法訪問~@fireflysemantics/big-packaged-component-example包中未明確從包中匯出的任何內容。
這是您的包宣告為匯出的內容：
// node_modules/@fireflysemantics/big-packaged-component-example/package.json
{
// ...
"exports": {
".": {
"sass": "./src/lib//big.component.theme.scss",
"types": "./fireflysemantics-big-packaged-component-example.d.ts",
"esm2020": "./esm2020/fireflysemantics-big-packaged-component-example.mjs",
"es2020": "./fesm2020/fireflysemantics-big-packaged-component-example.mjs",
"es2015": "./fesm2015/fireflysemantics-big-packaged-component-example.mjs",
"node": "./fesm2015/fireflysemantics-big-packaged-component-example.mjs",
"default": "./fesm2020/fireflysemantics-big-packaged-component-example.mjs"
},
"./package.json": {
"default": "./package.json"
}
},
// ...
}
該包中只有兩個匯出：.和./package.json. 您無法~@fireflysemantics/big-packaged-component-example/big.component.theme在 SASS 檔案中匯入，因為./big.component.theme未從包中匯出。
嘗試將以下內容添加到@fireflysemantics/big-packaged-component-example.
"./big.component.theme": {
"sass": "./src/lib/big.component.theme.scss"
},
現在 Angular 的應用程式構建器的 SASS 加載器可以訪問匯入并且編譯將成功。
您不需要命名 SASS 檔案index.scss或_index.scss. 事實上，您可以為它命名任何您想要的名稱（只要它具有.scss檔案擴展名）。重要的位是exports物件中的鍵。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/480581.html
標籤：有角度的 npm 粗鲁的 ng-packagr 角度包格式
上一篇：重定向后NodeJS更改會話變數