Merge pull request #336 from martinbryant/add-v4-style-recipe-back

Add v4 style recipe back in as new recipe references vite

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.

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

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"

mkdocs.yml

@@ -148,6 +148,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"