Использование SCSS с библиотекой angular, созданной с помощью angular-cli

Я создал проект библиотеки angular, в котором хочу использовать SCSS для стилей.

Итак, я настроил

ng config schematics.@schematics/angular:component.styleext scss

и это сделало запись в файле angular.json

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

Теперь я использую библиотеку пользовательского интерфейса materialize-css в своих компонентах библиотеки. И для этого требуется импортировать свой файл SCSS.

Я не вижу файл styles.scss, в который можно импортировать этот и мои компоненты, а также другие общие стили?

Я попытался создать его и войти в angular.json

"styles": ["projects/library_name/styles.scss"]

Под projects -> library_name -> architect -> build -> options

но это показывает ошибку при создании проекта библиотеки

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles).

Обновить

У меня есть это, решение той же проблемы, если это поможет!


angular sass angular-cli
person Sunil Garg    schedule 27.12.2018    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я знаю, что было поздно, но может помочь с чьей-нибудь идеей.

  1. Создайте style.scss в библиотеке по тому же пути, что и ng-package.json.
  2. Открыть ng-package.json
  3. Добавить assets:["style.scss"] свойство
  4. запустить ng build @your-library-name --prod
  5. Вы увидите style.scss в своем dist/@your-library-name.
  6. Тогда это можно импортировать

ng-package.json

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/logo-software/accordion",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "@logo-software/theme"
  ],
  "assets": [
    "style.scss"
  ]
}

Если вы хотите использовать этот style.scss в своей текущей библиотеке: добавьте encapsulation: ViewEncapsulation.None в верхний главный @Component вашей библиотеки.

accordion.component.ts

@Component({
  selector: 'logo-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AccordionComponent implements OnInit {}

И последнее, что вы можете использовать сейчас этот style.scss на любом компоненте.

accordion.component.scss

// `@import "~@logo-software/theme/style";` for external import

@import "../../style"; // path to the style.scss file

:host{
}
person Serkan KONAKCI    schedule 22.01.2021
comment
У нас он тоже настроен таким образом, но у меня возникают проблемы с запуском изменений SCSS --watch. Выглядит так, как будто библиотека перекомпилируется, но папка dist не получает изменений. Ваше решение работало с часами? - person Tony Smith; 03.03.2021

arrow_upward
4
arrow_downward

До 10 января 2019 года в библиотеке нет прямой поддержки глобального scss, хотя это очень распространенный сценарий.

Из этого обсуждения я получил обходной путь, который мне нужно собрать самостоятельно. Итак, я использовал scss-bundle для создания одного большого файла scss. Вы можете добавить его, используя

yarn add scss-bundle@next -D

а затем сценарий для объединения и запуска в режиме просмотра

"build-lib-watch-styles": "scss-bundle -e \"./projects/lib-name/src/lib/styles/lib-name.scss\" -d \"./dist-lib/lib-name/styles/lib-name.scss\" -w \"./projects/lib-name/src/lib/styles\"",
person Sunil Garg    schedule 10.01.2019