Объединение сторонних scss-файлов в угловую библиотеку, созданную с помощью angular-cli - PullRequest
Новая
       55

Объединение сторонних scss-файлов в угловую библиотеку, созданную с помощью angular-cli

0 голосов
/ 31 декабря 2018

Я создал угловую библиотеку, используя angular-cli , которая дополнительно зависит от materialize-css .Поэтому я упомянул materialize-css как peerDependencies в projects / lib-name / package.json .

Теперь, так как нет прямой поддержки глобального 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 import / 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]

Как я могу решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 10 января 2019

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 .Я просто упомянул об этом в 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
0 голосов
/ 31 декабря 2018

измените свой файл angular.json 

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

замените на 

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

и импортируйте свой файл scss в массив стилей 

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