Fix Storybook Config

https://webpack.js.org/concepts/loaders/#inline
https://storybook.js.org/docs/configurations/default-config/#css-support
https://webpack.js.org/loaders/sass-loader/

Author: omega-takai

.storybook/config.js

@@ -1,6 +1,10 @@
+/**
+ * DOC: https://storybook.js.org/docs/configurations/default-config/#css-support
+ * DOC: https://webpack.js.org/concepts/loaders/#inline
+ */
 import { configure } from '@storybook/vue';
 
-import '!style-loader!css-loader?sourceMap!sass-loader!../src/assets/style/global.scss';
+import '!style-loader!css-loader?sourceMap!sass-loader?{"prependData":"@use \'./not-actual-styles\' as base;"}!../src/assets/style/global.scss';
 
 // automatically import all files ending in *.story.js
 configure(require.context('../src/components', true, /\.story\.js$/), module);

.storybook/webpack.config.js

@@ -16,6 +16,7 @@ const cssLoaderModule = {
     },
   },
 }
+
 const sassLoader = {
   loader: 'sass-loader',
   options: {
@@ -24,20 +25,10 @@ const sassLoader = {
     sassOptions: {
       fiber: require('fibers'),
     },
+    prependData: "@use '@/assets/style/_not-actual-styles' as base;",
   },
 }
 
-const sassResourcesLoader = {
-  loader: 'sass-resources-loader',
-  options: {
-    resources: [
-      path.resolve(__dirname, '../src/assets/style/_variables.scss'),
-      path.resolve(__dirname, '../src/assets/style/_mixins.scss'),
-      path.resolve(__dirname, '../src/assets/style/_functions.scss'),
-    ]
-  }
-}
-
 // Export a function. Accept the base config as the only param.
 // SEE: https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
 module.exports = async ({ config }) => {
@@ -57,15 +48,13 @@ module.exports = async ({ config }) => {
             'vue-style-loader',
             cssLoaderModule,
             sassLoader,
-            sassResourcesLoader,
           ],
         },
         {
           use: [
             'vue-style-loader',
             cssLoader,
             sassLoader,
-            sassResourcesLoader,
           ],
         },
       ],

package.json

@@ -14,7 +14,7 @@
     "lint:fix": "yarn lint:script --fix && yarn lint:style --fix",
     "lint:script": "eslint --ext .js,.vue .",
     "lint:style": "stylelint **/*.css **/*.scss **/*.vue",
-    "clean": "rimraf .nuxt dist .out public",
+    "clean": "rimraf .nuxt dist .out public coverage",
     "test": "jest",
     "style-migration": "sass-migrator --load-path node_modules module --verbose --migrate-deps",
     "storybook": "start-storybook -c .storybook -p 6006",
@@ -72,7 +72,6 @@
     "husky": "4.2.5",
     "jest": "25.3.0",
     "lint-staged": "10.1.7",
-    "node-sass": "4.13.1",
     "prettier": "2.0.5",
     "pug": "2.0.4",
     "pug-plain-loader": "1.0.0",