diff --git a/README.md b/README.md index 3511af6f31..d84b6ffbc1 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,10 @@ +> [!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: + 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. diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 0586a3eb71..cb808559fd 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -113,12 +113,49 @@ 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] ---- @@ -126,6 +163,8 @@ E.g. you can import the overall scss files to your `src/styles.scss` by adding t @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] @@ -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: