Угловые 6 разделов стилей библиотеки
Как вы можете настроить index.scss и импортировать глобальные таблицы стилей для переменных, mixins и т.д. В библиотеку с угловым 6?
Угловой CLI генерирует lib с корневым компонентом и компонентом scss, но стили, добавленные или импортированные в корневой компонент, недоступны для дочерних компонентов. По умолчанию смысл заключается в инкапсуляции стилей, но я просто не могу найти какую-либо информацию или примеры того, как это сделать.
"Styles "styles": [...]
angular.json "styles": [...]
пути, которые можно использовать для этого с помощью "projectType": "application"
, похоже, не работают с "projectType": "library"
.
Заранее спасибо за помощь!
ОБНОВЛЕНИЕ: мой проект был инициирован с использованием углового cli v6.0.5, следуя этому руководству: https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11
TL; DR для руководства:
ng new my-app --style=scss
ng generate library my-library --prefix ml
Это файловая структура, угловая 6 генерирует:
my-app
projects/
my-library/
src/
lib/
shared/..
widgets/..
my-library.component.ts
my-library.module.ts
sass/
_variables.scss
styles.scss // <<< This is where I want to '@import 'variables';', and for it to be available in all the components of the "my-library" project.
public_api.ts
src/
app/
app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
main.ts
index.scss
index.html
README.md
Версии пакетов:
Angular CLI: 6.0.5
Node: 10.2.1
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.6.5
@angular-devkit/build-angular 0.6.5
@angular-devkit/build-ng-packagr 0.6.5
@angular-devkit/build-optimizer 0.6.5
@angular-devkit/core 0.6.5
@angular-devkit/schematics 0.6.5
@angular/cli 6.0.5
@ngtools/json-schema 1.1.0
@ngtools/webpack 6.0.5
@schematics/angular 0.6.5
@schematics/update 0.6.5
ng-packagr 3.0.0
rxjs 6.2.0
typescript 2.7.2
webpack 4.8.3
Ответы
Ответ 1
Что касается глобальных стилей, я ответил на них в этом вопросе.
Для смесей и переменных также есть обходной путь.
- Создайте файл
index.scss
в корневой папке вашей библиотеки. Если вы будете следовать этому руководству из Angular, ваш путь будет my-project/projects/my-library/index.scss
. Это также папка, в которой находится ваш package.json
.
Таким образом, index.scss
будет файлом с вашими переменными и миксинами
$grey: #222;
@mixin mymixin {
background: #222;
}
- Включите это в свои файлы scss библиотеки, используя
import
@import '../../index.scss';
или любой другой относительный путь, по которому находится ваш компонентный файл scss.
- Теперь, чтобы этот файл был в вашем проекте приложения, скопируйте его после сборки в каталог dist. Для этого отредактируйте файл проекта angular библиотеки
package.json
(НЕ БИБЛИОТЕКА).
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build && npm run copyScss",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"copyScss": "xcopy \"projects\my-library\index.scss\" \"dist\\my-library\\\""
},
...
}
Теперь, очень важно, НЕ используйте ng build
для сборки вашей библиотеки, вместо этого используйте npm run build
. Это автоматически выполнит команду копирования. Теперь файл index.scss
экспортируется вместе с вашей библиотекой в папку my-project/dist
.
Включите index.scss
в свои scss файлы проекта приложения
// ~ stands for the node_modules folder
@import '~my-library/index.scss';
Теперь у вас есть все ваши библиотечные миксины во всех проектах, в которых вы установили свою библиотеку.
Ура!
PS Временные решения не самые элегантные решения, но когда ничего не работает, они обходятся!
Ответ 2
Запустите ng init
для проекта, чтобы он инициализировал проект как проект Angular CLI.
Изменить:
Мой плохой, кажется, они удалили init
из CLI. Вы можете попробовать ng new --src
Это может перезаписать некоторые файлы, поэтому попробуйте сделать это на копии проекта.
Ответ 3
Пробовали ли вы установить уровень инкапсуляции компонента в none как часть метаданных компонента? Как это:
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
Уровни ViewEncapsulation:
- ViewEncapsulation.Emulated: по умолчанию Угловая эмуляция Shadow DOM.
- ViewEncapsulation.Native: используйте собственный теневой DOM-браузер.
- ViewEncapsulation.None: Стили являются глобальными
Посмотрите на Angular Docs на ViewEncapsulation, и я написал сообщение в блоге.
Ответ 4
Я думаю, что людям может не хватать того факта, что, хотя параметры инкапсуляции существуют, глобальные стили выводятся в тегах стилей и могут каскадно использоваться в вашем проекте.
Вот моя установка:
-
Мои глобальные стили: styles.scss выводится в тегах стилей. Правила предназначаются для всех соответствующих классов и элементов, как и ожидалось. Даже внутри компонентов.
-
Стили компонентов инкапсулированы. Это их ценность опора. Они перезаписывают глобальные переменные и сохраняют специфичные для компонента стили вместе с семейством компонентов.
-
@includes
такие как variables.scss, mixins.scss и т.д., включаются явно в начало любого компонента .scss файлов, когда это необходимо.
@import '../../../../scss/includes/variables';
Что еще нам нужно?