2

我使用angular-cli创建了一个角度库，这进一步依赖于materialize-css。所以我在projects/lib-name/package.jsonmaterialize-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-cssscss 文件并显示错误

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]

我该如何解决这个问题？

4

2 回答 2

0

库名称.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
于 2019-01-10T07:07:12.950 回答
-1

更改您的 angular.json 文件

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

用。。。来代替

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

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

"styles": [                  
              "src/styles.scss"
            ],
于 2018-12-31T08:45:04.260 回答