From 80d0c5b0545f7ab069abccb4ccdf3396386d6087 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Mon, 24 Oct 2022 09:59:42 +0200 Subject: [PATCH 1/6] Update getStarted.adoc --- docs/getStarted.adoc | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 75a8a1d216..56e0df3ab6 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -58,6 +58,8 @@ This should add a new entry to your `package.json` file: @import "@db-ui/core/sources/css/enterprise/db-ui-core"; ---- +### SCSS: `node_modules include path / load path + Please keep in mind, that you would need to set your `include path` also known as `load path` depending on your setup for the sass compiler to find the correct `node_modules` folder, e.g. like the following (this is similar to how other frameworks and libraries like link:https://github.com/twbs/bootstrap-npm-starter/blob/main/package.json#L18[Bootstrap] are handling this): #### link:https://npmjs.com/sass[`sass` compiler] From 7ef85c37a08a687bc61334e465f786b85713fd91 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Mon, 24 Oct 2022 10:07:23 +0200 Subject: [PATCH 2/6] Update migrationGuide.adoc --- docs/migrationGuide.adoc | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc index 52308c18d7..5187fac09f 100644 --- a/docs/migrationGuide.adoc +++ b/docs/migrationGuide.adoc @@ -12,6 +12,8 @@ Especially the following aspects have changed through the various different rele Please note that we've switched from the deprecated link:https://www.npmjs.com/package/node-sass[`node-sass`] compiler to its successor link:https://www.npmjs.com/package/sass[`sass`]. As `sass` doesn't support the tilde (`~`) reference to your `node_modules` folder out of the box and there even also doesn't seem to be a general solution out there, we've removed that one, so that in case you're using our SCSS sources directly, you would need to provide your `node_modules` folder as a load path or include path (e.g. `--load-path=node_modules` on the `sass` CLI usage). +You need to set the load path / include path depending on your SCSS compiler as described within our link:getStarted.adoc#scss-node_modules-include-path--load-path[getting started] + Additionally we've deprecated the `@db-ui/core/sources/css/enterprise/db-ui-core-include` SCSS endpoint – please either `@import` the file `@db-ui/core/sources/css/rollup.assets-paths` or `@db-ui/core/sources/css/webpack.assets-paths` depending on your bundler, previous to `@import`ing `@db-ui/core/sources/css/enterprise/db-ui-core` directly from now on. ==== SCSS Helper functions From 94bb9a4fb68e37eb3ac632ad22b56575ce35e838 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Mon, 24 Oct 2022 14:47:16 +0200 Subject: [PATCH 3/6] chore: added create react app example section --- docs/getStarted.adoc | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 56e0df3ab6..701ce9b5ae 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -172,6 +172,24 @@ If you want to use the compiled CSS directly, you can refence the css files in y ---- +## Example 2: how to use DB UI Core in Create React app + +Create React App offers only limited access to the configuration of the production build. While it uses Webpack under the hood, the WebPack configuration is not exposed to the user. +For manage your CRA to work with SASS include Path you have to update or create your .env file: + +---- +SASS_PATH=node_modules +---- + +In addition to get the asset paths working you have to load them separately. Further description is written above under _Webpack based bundlers_. + +[source,scss] +---- +@import "@db-ui/core/sources/css/webpack.assets-paths"; +@import "@db-ui/core/sources/css/enterprise/db-ui-core"; +---- + + ## Documentation Please find our Architectural Decision Records within the link:adr/[adr subfolder]. From fc59bc05440f44dfc19d04a4c7f1593d77396410 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Mon, 24 Oct 2022 22:41:54 +0200 Subject: [PATCH 4/6] Update getStarted.adoc --- docs/getStarted.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 701ce9b5ae..186f7ffcb7 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -174,7 +174,7 @@ If you want to use the compiled CSS directly, you can refence the css files in y ## Example 2: how to use DB UI Core in Create React app -Create React App offers only limited access to the configuration of the production build. While it uses Webpack under the hood, the WebPack configuration is not exposed to the user. +Create React App offers only limited access to the configuration of the production build. While it uses webpack under the hood, the webpack configuration is not exposed to the user. For manage your CRA to work with SASS include Path you have to update or create your .env file: ---- From 35611b3ee01d4b407a9a15d57efe8eb9bea6329d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 25 Oct 2022 06:54:32 +0200 Subject: [PATCH 5/6] Update getStarted.adoc --- docs/getStarted.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 186f7ffcb7..a5ae16b420 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -58,7 +58,7 @@ This should add a new entry to your `package.json` file: @import "@db-ui/core/sources/css/enterprise/db-ui-core"; ---- -### SCSS: `node_modules include path / load path +### SCSS: node_modules include path / load path Please keep in mind, that you would need to set your `include path` also known as `load path` depending on your setup for the sass compiler to find the correct `node_modules` folder, e.g. like the following (this is similar to how other frameworks and libraries like link:https://github.com/twbs/bootstrap-npm-starter/blob/main/package.json#L18[Bootstrap] are handling this): From 1d021ddfe246ad3f410ed2a8d05fd8ec344af0a5 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 25 Oct 2022 06:56:45 +0200 Subject: [PATCH 6/6] Update getStarted.adoc --- docs/getStarted.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index a5ae16b420..d3a2db6256 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -175,13 +175,13 @@ If you want to use the compiled CSS directly, you can refence the css files in y ## Example 2: how to use DB UI Core in Create React app Create React App offers only limited access to the configuration of the production build. While it uses webpack under the hood, the webpack configuration is not exposed to the user. -For manage your CRA to work with SASS include Path you have to update or create your .env file: +To manage your CRA to work with SASS include Path you have to update or create your _.env_ file: ---- SASS_PATH=node_modules ---- -In addition to get the asset paths working you have to load them separately. Further description is written above under _Webpack based bundlers_. +In addition to get the asset paths working you have to load them separately. Further description is written above within the section _webpack based bundlers_. [source,scss] ----