将第三方 scss 文件捆绑到使用 angular-cli 创建的 angular 库中答案

【问题标题】：Bundling third party scss files into angular library created using angular-cli将第三方 scss 文件捆绑到使用 angular-cli 创建的 angular 库中
【发布时间】：2019-05-27 20:14:41
【问题描述】：

我使用 angular-cli 创建了一个角度库，这进一步依赖于materialize-css。所以我在 projects/lib-name/package.json 中提到了 materialize-css 为 peerDependencies。

现在由于没有对全局 scss 的直接支持，所以我使用 scss-bundle 将所有 scss 文件捆绑为一个，然后将文件复制到库的 dist 文件夹中。 p>

scss 文件的结构

projects/lib-name/src/lib/sass/
   /common/_materialize-css.scss (this imports some of component's scss from materialize-css library)
   /lib-name.scss

和 lib-name.scss 导入 /common/_materialize-css.scss

这是我在应用的 package.json

中创建的脚本

"watch-scss": "scss-bundle -e \"./projects/lib-name/src/lib/sass/lib-name.scss\" -d \"./dist-lib/lib-name/sass/lib-name.scss\" -w \"./projects/lib-name/src/lib/sass\""

但这并不能解析materialize-css scss 文件并显示错误

common\node_modules\materialize-css\sass\components\variables.scss [NOT FOUND]

lib-name.scss
[watch-scss] ├─┬ common\_materialize.scss
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\color-variables.scss [NOT FOUND]
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\variables.scss [NOT FOUND]
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\normalize.scss [NOT FOUND]
[watch-scss] │ ├── common\node_modules\materialize-css\sass\components\buttons.scss [NOT FOUND]

我该如何解决这个问题？

【问题讨论】：

标签： angular sass angular-cli angular-library

【解决方案1】：

lib-name.scss

@import "./common/variables.scss";
@import "./common/materialize-config.scss";
@import "./common/materialize.scss";

/common/materialize.scss

@import "~materialize-css/sass/components/color-variables";
@import "~materialize-css/sass/components/variables";
@import "~materialize-css/sass/components/normalize";

由于应用程序和库共享相同的 node_modules，因此我还需要安装 materialize-css 库。我只是在 lib 的 package.json（即将发布的那个）中提到它。

由于这是主要依赖项，所以我没有在peerDependencies 中提及它，而是在dependencies 下提及它

{
  "name": "my-lib",
  "version": "0.0.1",
  "dependencies": {
    "materialize-css": "^1.0.0"
  },
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0"
  }
}

如果你想定义dependencies，那么你需要像这样在ng-package.json（ng-packager在构建库时使用的那个）中将其列入白名单

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  // ----- 
  "whitelistedNonPeerDependencies": [
    "materialize-css"
  ]
}

使用 scss-bundle 运行监视模式，使用安装最新版本

yarn add scss-bundle@next -D

【讨论】：

【解决方案2】：

改变你的 angular.json 文件

"schematics": {
        "@schematics/angular:component": {
          "styleext": "css"
        }
      },

替换为

"schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },

并在样式数组中导入您的 scss 文件

"styles": [                  
              "src/styles.scss"
            ],

【讨论】：

我要捆绑到库中