config sass and storybook

Author: Demysdcl

.env

@@ -0,0 +1 @@
+ENV_TITLE=We are in production environment

.env.development

@@ -0,0 +1 @@
+ENV_TITLE=We are in development environment

.storybook/addons.js

@@ -0,0 +1,6 @@
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";
+import "@storybook/addon-viewport/register";
+import "@storybook/addon-knobs/register";

.storybook/config.js

@@ -1,8 +1,4 @@
-import { configure } from "@storybook/svelte"
+import { configure } from "@storybook/svelte";
 
-function loadStories() {
-  const req = require.context("../src/stories", true, /\.stories\.js$/)
-  req.keys().forEach(filename => req(filename))
-}
-
-configure(loadStories, module)
+// automatically import all files ending in *.stories.js
+configure(require.context("../src/stories", true, /\.stories\.[jt]s$/), module);

.storybook/presets.js

@@ -0,0 +1,10 @@
+module.exports = [
+  {
+    name: "@storybook/preset-scss",
+    options: {
+      cssLoaderOptions: {
+        sourceMap: true
+      }
+    }
+  }
+];

.storybook/webpack.config.js

@@ -0,0 +1,26 @@
+const { aliases, scssAliases } = require("../webpack.parts");
+const merge = require("webpack-merge");
+
+module.exports = ({ config, mode }) => {
+  // console.dir(config, { depth: null });
+  let mergedConfig = merge.smart(config, {
+    module: {
+      rules: [
+        {
+          test: /\.(svelte|html)$/,
+          loader: "svelte-loader",
+          options: {
+            preprocess: require("svelte-preprocess")({
+              scss: {
+                importer: [scssAliases(aliases)]
+              }
+            })
+          }
+        }
+      ]
+    }
+  });
+  mergedConfig.resolve.alias = { ...mergedConfig.resolve.alias, ...aliases };
+  //console.dir(mergedConfig, {depth: null});
+  return mergedConfig;
+};