External webpack-config for Storybook

Author: garcia-alejandro

.storybook/main.js

@@ -1,8 +1,27 @@
+const webpackConfig = require('../webpack-config.js')
+const path = require('path');
 module.exports = {
   "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   "addons": ["@storybook/addon-links", "@storybook/addon-essentials"],
   "framework": "@storybook/vue3",
   core: {
     builder: "webpack5"
+  },
+  "webpackFinal": async(cfg, {configType}) => {
+    cfg.module.rules.push({
+      test: /\.(styl|stylus)$/,
+      use: ['style-loader', 'css-loader', 'stylus-loader'],
+    });
+    cfg = webpackConfig(cfg)
+    // cfg.plugins.push(
+    //   new ESLintPlugin(options)
+    // )
+    // cfg.plugins.push(new ESLintPlugin({
+    //   extensions: [ 'js', 'vue' ],
+    //   fix: true,
+    //   formatter: 'stylish',
+    //   threads: false
+    // }))
+    return cfg;
   }
-};
+};

webpack-config.js

@@ -0,0 +1,30 @@
+const path = require('path')
+const ESLintPlugin = require('eslint-webpack-plugin')
+
+const options = {
+  extensions: [`js`, `vue`],
+  exclude: [
+    'node_modules/',
+    '.storybook'
+  ],
+  fix: true,
+  formatter: 'stylish',
+  threads: false
+}
+
+module.exports = (cfg) => {
+  cfg.module.rules.push({
+    test: /\.pug$/,
+    loader: 'pug-plain-loader'
+  })
+  cfg.resolve.alias = {
+    ...cfg.resolve.alias,
+    '~': path.resolve(__dirname, 'src')
+  }
+
+  cfg.plugins.push(
+    new ESLintPlugin(options)
+  )
+
+  return cfg
+}