Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: added warning for SASS usage #1023

Merged
merged 5 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@

<!-- ![Pipeline status](https://github.com/db-ui/core/badges/main/pipeline.svg?style=flat) -->

> [!WARNING]
> We've tried a [quick migration to newer SCSS syntax like e.g. `@use` instead of the nowadays deprecated `@import`](https://github.com/db-ui/core/issues/994), but this seems to be more complicated than expected.
> You might face several warnings on the console when using SASS with our packages regarding `@import` usage. If you'd like to prevent those, you might as well want to evaluate migrating to our newer version of the DB UX Design System: <https://github.com/db-ui/mono>

DB Personenverkehr and DB Systel have merged their Design Systems for Web [with DB UX Design System v2](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components) as their successor. Our goal is to provide a common UX based on the [DB "Moderne Ikone"](https://marketingportal.extranet.deutschebahn.com/marketingportal/Marke-und-Design#) for customer and employee applications. To achieve an end 2 end consistence from conception to implementation, we bring you this new version of DB UI Core (npm: `@db-ui/core`), that is being used within a Design System by S.R (Reisendeninformation) as well.

DB UI Core provides robust HTML UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
Expand Down
54 changes: 41 additions & 13 deletions docs/getStarted.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -113,19 +113,58 @@ Independently you need to add to `angular.json` a new line to assets like this:

It will copy on *npm build* the content of *core/dist* folder to *dist* folder in the angular app, that is deployed on *ng serve* and will give you access to assets like images, icons, etc. exported by DB UI Core. Don't forget to add it to any necessary configuration part included, like e.g. `projects.PROJECTNAME.architect.build.options` as well as `projects.PROJECTNAME.architect.test.options`

### Use scss files:
### Use SCSS files:

You can use the overall scss file or pick the relevant parts.
E.g. you can import the overall scss files to your `src/styles.scss` by adding the following imports based on your bundler in use.

#### Webpack based bundlers (e.g. Angular or Vue CLI)
#### Rollup based bundlers (e.g. Parcel, Vite)

For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:

##### `@use` syntax

[source,scss]
----
@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
$icons-path: rollupAssetsPaths.$icons-path,
$images-path: rollupAssetsPaths.$images-path,
$fonts-path: rollupAssetsPaths.$fonts-path
);
----

##### deprecated `@import` syntax

[source,scss]
----
@import "@db-ui/core/sources/css/rollup.assets-paths";
@import "@db-ui/core/sources/css/enterprise/db-ui-core";
----


#### Webpack based bundlers (e.g. older Angular or Vue CLI versions)

[source,scss]
----
@use "@db-ui/core/sources/css/webpack.assets-paths" as webpackAssetsPaths;
@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
$icons-path: webpackAssetsPaths.$icons-path,
$images-path: webpackAssetsPaths.$images-path,
$fonts-path: webpackAssetsPaths.$fonts-path
);
----

##### deprecated `@import` syntax

[source,scss]
----
@import "@db-ui/core/sources/css/webpack.assets-paths";
@import "@db-ui/core/sources/css/enterprise/db-ui-core";
----

#### General

Please keep in mind, that you would need to set your include path within the `angular.json` configuration file, like this:

[source,json]
Expand Down Expand Up @@ -155,17 +194,6 @@ module.exports = {
};
----

#### Rollup based bundlers (e.g. Vue with Vite)

For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:

[source,scss]
----
@import "@db-ui/core/sources/css/rollup.assets-paths";
@import "@db-ui/core/sources/css/enterprise/db-ui-core";
----


### Use css files:

If you want to use the compiled CSS directly, you can reference the css files in your index.html like this:
Expand Down
Loading