From e85165c71e1ec6efd3559d640df565753f219db0 Mon Sep 17 00:00:00 2001
From: Martin Bryant <mail@martinbryant.dev>
Date: Fri, 22 Dec 2023 12:51:29 +0000
Subject: [PATCH] add v4 style recipe back in as new recipe references vite

---
 docs/v4-recipes/ui/add-style.md    | 45 ++++++++++++++++++++++++++++++
 docs/v4-recipes/ui/add-tailwind.md |  2 +-
 docs/v4-recipes/ui/cdn-to-npm.md   |  2 +-
 mkdocs.yml                         |  1 +
 4 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 docs/v4-recipes/ui/add-style.md

diff --git a/docs/v4-recipes/ui/add-style.md b/docs/v4-recipes/ui/add-style.md
new file mode 100644
index 00000000..6a84ea21
--- /dev/null
+++ b/docs/v4-recipes/ui/add-style.md
@@ -0,0 +1,45 @@
+# How Do I Use stylesheets with SAFE?
+If you wish to use your own CSS or SASS stylesheets with SAFE apps, you can embed either through webpack. The template already includes all required NPM packages you may need, so you will only need to configure webpack to reference your stylesheet and include in the outputs.
+
+## Adding the Stylesheet
+First, create a CSS file in the `src/Client` folder of your solution e.g `style.css`.
+
+> The same approach can be taken for `.scss` files.
+
+## Configuring WebPack
+
+### I'm using the Standard Template
+#### 1. Link to the stylesheet
+
+Inside the `webpack.config.js` file, add the following variable to the `CONFIG` object, which points to the style file you created previously.
+```javascript
+cssEntry: './src/Client/style.css',
+```
+
+#### 2. Embed CSS into outputs
+ Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following:
+```javascript
+entry: isProduction ? {
+    app: [resolve(CONFIG.fsharpEntry), resolve(CONFIG.cssEntry)]
+} : {
+    app: resolve(CONFIG.fsharpEntry),
+    style: resolve(CONFIG.cssEntry)
+},
+```
+
+This combines the css and F# outputs into a single bundle for production, and separately for dev.
+
+### I'm using the Minimal Template
+#### 1. Embed CSS into outputs
+Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following:
+```javascript
+entry: {
+    app: [
+        resolve('./src/Client/Client.fsproj'),
+        resolve('./src/Client/style.css')
+    ]
+},
+```
+
+## There you have it!
+You can now style your app by writing to the `style.css` file.
\ No newline at end of file
diff --git a/docs/v4-recipes/ui/add-tailwind.md b/docs/v4-recipes/ui/add-tailwind.md
index 255a614b..a66ba9fa 100644
--- a/docs/v4-recipes/ui/add-tailwind.md
+++ b/docs/v4-recipes/ui/add-tailwind.md
@@ -2,7 +2,7 @@
 
 [Tailwind](https://tailwindcss.com/) is a utility-first CSS framework packed that can be composed to build any design, directly in your markup.
 
-1. [Add a stylesheet](../../recipes/ui/add-style.md) to the project
+1. [Add a stylesheet](add-style.md) to the project
 
 2. Install the required npm packages
     ```shell
diff --git a/docs/v4-recipes/ui/cdn-to-npm.md b/docs/v4-recipes/ui/cdn-to-npm.md
index 5b5ac7fc..d472560d 100644
--- a/docs/v4-recipes/ui/cdn-to-npm.md
+++ b/docs/v4-recipes/ui/cdn-to-npm.md
@@ -27,7 +27,7 @@ importAll "bulma/bulma.sass"
 > You can use this approach for any NPM package.
 
 ##### b. Using Sass
-1. Add a Sass stylesheet to your project using [this recipe](../../recipes/ui/add-style.md).
+1. Add a Sass stylesheet to your project using [this recipe](add-style.md).
 2. Add the following line to your Sass file to bring in Bulma
 ```sass
 @import "~bulma/bulma.sass"
diff --git a/mkdocs.yml b/mkdocs.yml
index 606dbb73..9f089aaa 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -145,6 +145,7 @@ nav:
           - Quickly add a database: "v4-recipes/storage/use-litedb.md"
           - Create a data module using SQLProvider SQL Server SSDT: "v4-recipes/storage/use-sqlprovider-ssdt.md"
       - UI:
+          - Add Stylesheet support: "v-4/recipes/ui/add-style.md"
           - Add FontAwesome support: "v4-recipes/ui/add-fontawesome.md"
           - Add Bulma support: "v4-recipes/ui/add-bulma.md"
           - Use different Bulma Themes: "v4-recipes/ui/use-different-bulma-themes.md"