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

Question

我使用 angular-cli 创建了一个 angular 库，它进一步依赖于 materialize-css。所以我在 projects/lib-name/package.json.

中提到 materialize-css 作为 peerDependencies

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

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]

我该如何解决这个问题？

Answer 1

更改您的 angular.json 文件

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

替换为

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

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

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

Answer 2

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"
  ]
}

到运行 watch mode with scss-bundle install the latest version using

yarn add scss-bundle@next -D

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

Bundling third party scss files into angular library created using angular-cli

angular

sass

angular-cli

angular-library