Question

我已经使用 angular-cli 创建了一个角度库，它进一步依赖于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"
  ]
}

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

yarn add scss-bundle@next -D

将第三方scss文件捆绑到使用angular-cli

2 个答案: