Skip to content

Commit 5e6ef6c

Browse files
committed
refactor: added additional relevant information
1 parent a302386 commit 5e6ef6c

File tree

1 file changed

+41
-13
lines changed

1 file changed

+41
-13
lines changed

docs/getStarted.adoc

Lines changed: 41 additions & 13 deletions
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)