fix: do not use relative path in html (#82)

rspack-contrib · Sep 3, 2024 · 3d24b03 · 3d24b03
1 parent 17d28d2
commit 3d24b03
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -210,7 +210,24 @@ The `configType` variable will be either `"DEVELOPMENT"` or `"PRODUCTION"`.
 
 The function should return the updated Rsbuild configuration.
 
-## Troubleshooting
+## FAQ
+
+### How to Storybook to a subdirectory / subpath?
+
+The default Vite and webpack builders in Storybook use relative paths for references, whereas Rsbuild does not recommend using relative paths for deployment (See the [tips](https://rsbuild.dev/config/output/asset-prefix#path-types:~:text=on%20file%20location.-,TIP,-It%27s%20not%20recommended)). Therefore, if you want to deploy Storybook on a sub-path such as `https://example.com/sb-path`, you can achieve this by configuring [`output.assetPrefix`](https://rsbuild.dev/config/output/asset-prefix).
+
+```diff
+const config: StorybookConfig = {
+  // --snip--
+  rsbuildFinal: (config) => {
++   config.output ??= {}
++   config.output.assetPrefix = '/sb-path/'
+    return config
+  },
+  // --snip--
+}
+```
+
 
 ### Error caused by bundling unexpected files
 

diff --git a/biome.json b/biome.json
@@ -29,6 +29,11 @@
       "semicolons": "asNeeded"
     }
   },
+  "css": {
+    "formatter": {
+      "enabled": true
+    }
+  },
   "linter": {
     "enabled": true,
     "ignore": ["./scripts/"],

diff --git a/packages/builder-rsbuild/templates/preview.ejs b/packages/builder-rsbuild/templates/preview.ejs
@@ -73,13 +73,8 @@
     <% } %>
     <script type="module">
       import './sb-preview/runtime.js';
-
       <% htmlWebpackPlugin.files.js.forEach(file => { %>
-        <% if (file.startsWith('/')) { %>
-          import '.<%= file %>';
-        <% } else { %>
-          import './<%= file %>';
-        <% } %>
+      import '<%= file %>';
       <% }); %>
     </script>    
   </body>

diff --git a/sandboxes/react-16/src/stories/button.css b/sandboxes/react-16/src/stories/button.css
@@ -1,5 +1,5 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
   border: 0;
   border-radius: 3em;

diff --git a/sandboxes/react-16/src/stories/header.css b/sandboxes/react-16/src/stories/header.css
@@ -1,5 +1,5 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;

diff --git a/sandboxes/react-16/src/stories/page.css b/sandboxes/react-16/src/stories/page.css
@@ -1,5 +1,5 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;

diff --git a/sandboxes/react-18/src/stories/button.css b/sandboxes/react-18/src/stories/button.css
@@ -1,5 +1,5 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
   border: 0;
   border-radius: 3em;

diff --git a/sandboxes/react-18/src/stories/header.css b/sandboxes/react-18/src/stories/header.css
@@ -1,5 +1,5 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;

diff --git a/sandboxes/react-18/src/stories/page.css b/sandboxes/react-18/src/stories/page.css
@@ -1,5 +1,5 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;
@@ -17,6 +17,10 @@
   vertical-align: top;
 }
 
+.storybook-page h2::before {
+  content: url("./assets/context.png");
+}
+
 .storybook-page p {
   margin: 1em 0;
 }

diff --git a/sandboxes/vue3/src/stories/button.css b/sandboxes/vue3/src/stories/button.css
@@ -1,5 +1,5 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
   border: 0;
   border-radius: 3em;

diff --git a/sandboxes/vue3/src/stories/header.css b/sandboxes/vue3/src/stories/header.css
@@ -1,5 +1,5 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;

diff --git a/sandboxes/vue3/src/stories/page.css b/sandboxes/vue3/src/stories/page.css
@@ -1,5 +1,5 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;