Как включить стили SASS в библиотеку angular 8

У меня была библиотека angular для совместного использования некоторых компонентов, директив и прочего между двумя проектами.

Недавно я попытался включить в библиотеку несколько стилей для повторного использования в двух проектах, но я могу добиться, чтобы ng build включил их в пакет.

¿Есть подсказка?


person Sebastián Rojas    schedule 09.08.2019    source источник


Ответы (2)


Единственный способ, который я нашел до сих пор, - это запустить сценарий npm для копирования файлов sass в папку dist (с использованием файлов копирования) перед упаковкой .tgz для внутреннего использования.

Вот мой package.json:

{
...
     "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "uiutils_build": "ng build my-library",
        "uiutils_styles": "copyfiles -f projects/my-library/src/scss/*.scss dist/@my-namespace/my-library/scss",
        "uiutils_pack": "cd dist/@my-namespace/my-library && npm pack",
        "uiutils_copy": "copyfiles -f dist/@my-namespace/my-library/*.tgz ../infraestructure.tourbitz.com/packages/@my-namespace/my-library",
        "uiutils_package": "npm run uiutils_build && npm run uiutils_styles && npm run uiutils_pack && npm run uiutils_copy"
      },
...
}

важный сценарий - uiutils_styles.

¿Как использовать?

В свои файлы стилей я включил стили:

@import "~@my-namespace/ui-uitils/scss/my_style.scss";

А для регистрации глобальных стилей я сделал в разделе проекта файла angular.json:

{
... 
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
"styles": [
              "node_modules/@my-namespace/my-library/scss/my_style.scss",
              "src/styles.scss"
            ],
...
},
...
}
person Sebastián Rojas    schedule 09.08.2019

Обновление для Angular 9:

В библиотеке, рядом с lib-каталогом, создайте styles-каталог, а затем добавьте его в качестве ресурсов в ng-rollout.yaml следующим образом:

"assets": [
  "styles/**/*.scss"
]

Это скопирует все SCSS-файлы, найденные рекурсивно в каталоге styles, в каталог styles в каталоге вывода вашей библиотеки.

person sschmid    schedule 10.08.2020