如何导入angular13库打包SASS？

Question

使用 Angular 13 和 ng-packagr 当我们发布带有库的 SASS mixin 时，我们需要将库添加到 package.json 中的导出并声明一个 assets 块在 ng-package.json.

这些是说明。

https://github.com/ng-packagr/ng-packagr/blob/main/docs/copy-assets.md

并且在本期也有说明：

所以我已经为这个项目做到了： 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

Answer 1

ng-packagr 和 @angular-devkit/build-angular:browser 中使用的 sass 解析器支持 package exports。简而言之，这意味着您无法访问 ~@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。您无法在 SASS 文件中导入 ~@fireflysemantics/big-packaged-component-example/big.component.theme，因为 ./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 对象中的键。

如何导入angular13库打包SASS？

How to import angular 13 library packaged SASS?

sass

npm

angular

ng-packagr

angular-package-format

更新