diff --git a/frontend/.storybook/webpack.config.js b/frontend/.storybook/webpack.config.js
index afd395809..1a123fa52 100644
--- a/frontend/.storybook/webpack.config.js
+++ b/frontend/.storybook/webpack.config.js
@@ -3,7 +3,8 @@ const mainConfig = require('../webpack.config.js');
 
 module.exports = async ({ config }) => {
   var conf = mainConfig();
-  config.resolve.alias = Object.assign(pathAlias, config.resolve.alias); // Path Alias
+  config.resolve.alias = Object.assign(conf.resolve.alias, config.resolve.alias); // Path Alias
+  config.resolve.extensions = conf.resolve.extensions
   config.module.rules = conf.module.rules;
   config.module.rules[0].use[0] = 'style-loader';  // instead of separated css
   config.module.rules[1].use[0] = 'style-loader';
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index d0e5b6ca6..70958ce58 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -129,7 +129,7 @@ module.exports = (envName = 'local') => {
         },
         {
           test: /\.css$/,
-          include: [ /node_modules/, /app\/styles/ ],
+          include: [ path.join(__dirname, "node_modules"), path.join(__dirname, "app/styles") ],
           use: [
             cssFileLoader,
             {
@@ -148,7 +148,7 @@ module.exports = (envName = 'local') => {
         },
         {
   	      test: /\.js$/,
-  	      include: path.join(__dirname, "app"),
+  	      include: [ path.join(__dirname, "app"), path.join(__dirname, ".storybook") ],
   	      use: babelLoader,
   	    },
         {