From f697a1aec77a03b40fcab1ebca614099a9d9a69a Mon Sep 17 00:00:00 2001 From: Jaz Thomson Date: Fri, 15 Dec 2023 14:12:19 +0000 Subject: [PATCH 1/2] Update "add style" recipe for SAFE v5 --- docs/recipes/ui/add-style.md | 32 +++++++++++++++++++++++ docs/v4-recipes/ui/add-style.md | 45 --------------------------------- mkdocs.yml | 2 +- 3 files changed, 33 insertions(+), 46 deletions(-) create mode 100644 docs/recipes/ui/add-style.md delete mode 100644 docs/v4-recipes/ui/add-style.md diff --git a/docs/recipes/ui/add-style.md b/docs/recipes/ui/add-style.md new file mode 100644 index 00000000..308bbf09 --- /dev/null +++ b/docs/recipes/ui/add-style.md @@ -0,0 +1,32 @@ +# How do I use stylesheets with SAFE? +The default way to add extra styles is to add them using Tailwind classes. +If you wish to use your own CSS stylesheets with SAFE apps, Vite can bundle them up for you. + +There are two different approaches to adding your own CSS file, depending on what files you have available. + +## Method A: Import into `index.css` +The default template includes a stylesheet at `src/Client/index.css` which contains references to Tailwind. +The cleanest way to add your own stylesheet is to create a new file e.g. `src/Client/custom-style.css` and then reference it from `index.css`. + +1. Create your custom css file in `src/Client`, e.g. `custom-style.css` +1. Import it into `index.css` + ```diff + +@import "./custom-style.css"; + @tailwind base; + @tailwind components; + @tailwind utilities; + ``` + +## Method B: Import without `index.css` +In order for Vite to know that there are styles to be bundled, you must import them into your app. By default this is already configured for `index.css` but if you don't have it set up, not to worry! Follow these steps: + +1. Create your custom css file in `src/Client`, e.g. `custom-style.css` +1. Direct Fable to emit an import for your style file. + - Add the following to `App.fs`: + ```fsharp + open Fable.Core.JsInterop + importSideEffects "./custom-style.css" + ``` + +## There you have it! +You can now style your app by writing to the `custom-style.css` file. \ No newline at end of file diff --git a/docs/v4-recipes/ui/add-style.md b/docs/v4-recipes/ui/add-style.md deleted file mode 100644 index 6a84ea21..00000000 --- a/docs/v4-recipes/ui/add-style.md +++ /dev/null @@ -1,45 +0,0 @@ -# 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/mkdocs.yml b/mkdocs.yml index 11e4bbb4..7e473c84 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -74,6 +74,7 @@ nav: - Package my SAFE app for deployment: "recipes/build/bundle-app.md" - UI: - Add daisyUI support: "recipes/ui/add-daisyui.md" + - Add Stylesheet support: "recipes/ui/add-style.md" - Add FontAwesome support: "recipes/ui/add-fontawesome.md" - Storage: - Quickly add a database: "recipes/storage/use-litedb.md" @@ -133,7 +134,6 @@ nav: - Create a data module using SQLProvider SQL Server SSDT: "v4-recipes/storage/use-sqlprovider-ssdt.md" - UI: - Add FontAwesome support: "v4-recipes/ui/add-fontawesome.md" - - Add Stylesheet support: "v4-recipes/ui/add-style.md" - Add Bulma support: "v4-recipes/ui/add-bulma.md" - Use different Bulma Themes: "v4-recipes/ui/use-different-bulma-themes.md" - Remove Bulma: "v4-recipes/ui/remove-bulma.md" From 21017249e28bf77af840a691b4bbdc948a4546f5 Mon Sep 17 00:00:00 2001 From: Jaz Thomson Date: Fri, 15 Dec 2023 15:03:04 +0000 Subject: [PATCH 2/2] Revert deleting v4 "add style" recipe since there are changes --- docs/v4-recipes/ui/add-style.md | 45 +++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) 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