Skip to content

Commit 66f6fba

Browse files
authored
docs: added warning for SASS usage (#1023)
docs-added-warning-for-sass-usage
1 parent a83252d commit 66f6fba

File tree

2 files changed

+45
-13
lines changed

2 files changed

+45
-13
lines changed

README.md

+4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919

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

22+
> [!WARNING]
23+
> 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.
24+
> 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>
25+
2226
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.
2327

2428
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.

docs/getStarted.adoc

+41-13
Original file line numberDiff line numberDiff line change
@@ -113,19 +113,58 @@ Independently you need to add to `angular.json` a new line to assets like this:
113113

114114
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`
115115

116-
### Use scss files:
116+
### Use SCSS files:
117117

118118
You can use the overall scss file or pick the relevant parts.
119119
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.
120120

121-
#### Webpack based bundlers (e.g. Angular or Vue CLI)
121+
#### Rollup based bundlers (e.g. Parcel, Vite)
122+
123+
For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:
124+
125+
##### `@use` syntax
126+
127+
[source,scss]
128+
----
129+
@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
130+
@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
131+
$icons-path: rollupAssetsPaths.$icons-path,
132+
$images-path: rollupAssetsPaths.$images-path,
133+
$fonts-path: rollupAssetsPaths.$fonts-path
134+
);
135+
----
136+
137+
##### deprecated `@import` syntax
138+
139+
[source,scss]
140+
----
141+
@import "@db-ui/core/sources/css/rollup.assets-paths";
142+
@import "@db-ui/core/sources/css/enterprise/db-ui-core";
143+
----
144+
145+
146+
#### Webpack based bundlers (e.g. older Angular or Vue CLI versions)
147+
148+
[source,scss]
149+
----
150+
@use "@db-ui/core/sources/css/webpack.assets-paths" as webpackAssetsPaths;
151+
@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
152+
$icons-path: webpackAssetsPaths.$icons-path,
153+
$images-path: webpackAssetsPaths.$images-path,
154+
$fonts-path: webpackAssetsPaths.$fonts-path
155+
);
156+
----
157+
158+
##### deprecated `@import` syntax
122159

123160
[source,scss]
124161
----
125162
@import "@db-ui/core/sources/css/webpack.assets-paths";
126163
@import "@db-ui/core/sources/css/enterprise/db-ui-core";
127164
----
128165

166+
#### General
167+
129168
Please keep in mind, that you would need to set your include path within the `angular.json` configuration file, like this:
130169

131170
[source,json]
@@ -155,17 +194,6 @@ module.exports = {
155194
};
156195
----
157196

158-
#### Rollup based bundlers (e.g. Vue with Vite)
159-
160-
For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:
161-
162-
[source,scss]
163-
----
164-
@import "@db-ui/core/sources/css/rollup.assets-paths";
165-
@import "@db-ui/core/sources/css/enterprise/db-ui-core";
166-
----
167-
168-
169197
### Use css files:
170198

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

0 commit comments

Comments
 (0)