Storybook: Can't use '@' for addressing assets in vuejs(ts) templates and in scss files

[SeyyedKhandon]

Please consider below sample code which is a simple vue.js(ts) SFC (Loading.vue):
(the reprex link is at the bottom of this question)

<template>
  <div class="loading_container">
    <img
      class="loading_logo"
      src="@/assets/images/logo.png"
      alt="company logo"
    />
    <div class="loading_box">
      <div class="loading_dot"></div>
      <div class="loading_dot"></div>
      <div class="loading_dot"></div>
      <div class="loading_dot"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
export default defineComponent({
  name: "Loading"
});
</script>

and the corresponding story:

import Loading from "../src/views/components/loading/Loading";
import  "../src/assets/styles/index.scss";
// import  "../src/assets/styles/components/_Loading.scss";
export default {
  title: "Loading"
};

export const normalLoading = () => ({
  components: { Loading },
  template: "<Loading></Loading>",
});

this is my ./storybook/webpack.config.js to support scss files.

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.scss$/,
    loaders: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
    include: path.resolve(__dirname, "../")
  });
  config.plugins.push(new MiniCssExtractPlugin({ filename: "[name].css" }));

  return config;
};

and tsconfig if it is needed for you, beacuse it has a path as source(i think it might be related, but not sure, because it should work on ts files, by the way i put it here):

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

when I run npm run storybook, it keeps showing errors which cant resolve logo.png and other SVG assets which is been addressed in the scss files like "./assets/images/alert-triangle.svg".

here is the error log:

C:\Projects\my_github\vuejs-persian-chat-scaffold (storybook -> origin)
λ npm run storybook

> [email protected] storybook C:\Projects\my_github\vuejs-persian-chat-scaffold
> start-storybook

info @storybook/vue v5.3.19
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook\main.js".
info => Loading custom Webpack config (full-control mode).
webpack built 6faab574e4e42fdff517 in 10371ms
× ｢wdm｣: Hash: 6faab574e4e42fdff517
Version: webpack 4.43.0
Time: 10371ms
Built at: 06/10/2020 7:28:13 PM
                                          Asset      Size        Chunks                                Chunk Names
                                    iframe.html  2.87 KiB                [emitted]
            main.6faab574e4e42fdff517.bundle.js  26.7 KiB          main  [emitted] [immutable]         main
        main.6faab574e4e42fdff517.bundle.js.map  11.7 KiB          main  [emitted] [dev]               main
    runtime~main.6faab574e4e42fdff517.bundle.js  33.5 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.6faab574e4e42fdff517.bundle.js.map  34.7 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.6faab574e4e42fdff517.bundle.js  2.71 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.6faab574e4e42fdff517.bundle.js.map  2.81 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.6faab574e4e42fdff517.bundle.js runtime~main.6faab574e4e42fdff517.bundle.js.map vendors~main.6faab574e4e42fdff517.bundle.js vendors~main.6faab574e4e42fdff517.bundle.js.map main.6faab574e4e42fdff517.bundle.js main.6faab574e4e42fdff517.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main} [built]
[./.storybook/generated-entry.js] 240 bytes {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/vue/dist/client/index.js] 1.21 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23.6 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] (webpack)-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {vendors~main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
    + 654 hidden modules

ERROR in ./src/assets/styles/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './assets/images/alert-triangle.svg' in 'C:\Projects\my_github\vuejs-persian-chat-scaffold\src\assets\styles'
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\webpack\lib\Compilation.js:925:10
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\webpack\lib\NormalModuleFactory.js:401:22
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\webpack\lib\NormalModuleFactory.js:130:21
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\webpack\lib\NormalModuleFactory.js:224:22
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\neo-async\async.js:2830:7
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\neo-async\async.js:6877:13
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\webpack\lib\NormalModuleFactory.js:214:25
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\enhanced-resolve\lib\Resolver.js:213:14
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
    at C:\Projects\my_github\vuejs-persian-chat-scaffold\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
 @ ./stories/loading.stories.js 2:0-41
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.js[\\/]?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea&)
Module not found: Error: Can't resolve '@/assets/images/logo.png' in 'C:\Projects\my_github\vuejs-persian-chat-scaffold\src\views\components\loading'
 @ ./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea&) 15:22-57
 @ ./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea&
 @ ./src/views/components/loading/Loading.vue
 @ ./stories/loading.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.js[\\/]?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.49 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.14 KiB {HtmlWebpackPlugin_0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/assets/styles/index.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/nprogress/nprogress.css] 1.71 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/index.scss] 83.8 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sweetalert2/dist/sweetalert2.min.css] 24.6 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/vue-multiselect/dist/vue-multiselect.min.css] 7.21 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/vue-snotify/styles/material.css] 22.2 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/getUrl.js] 830 bytes {mini-css-extract-plugin} [built]

    ERROR in ./src/assets/styles/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/index.scss)
    Module not found: Error: Can't resolve './assets/images/alert-triangle.svg' in 'C:\Projects\my_github\vuejs-persian-chat-scaffold\src\assets\styles'
     @ ./src/assets/styles/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/index.scss) 9:36-81

    ERROR in ./src/assets/styles/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/index.scss)
    Module not found: Error: Can't resolve './assets/images/tick.svg' in 'C:\Projects\my_github\vuejs-persian-chat-scaffold\src\assets\styles'
     @ ./src/assets/styles/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/index.scss) 8:36-71

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

reprex

here is the reprex,(i commented the ./storybook/webpack.config.js):

https://github.com/SeyyedKhandon/vuejs-persian-chat-scaffold/tree/storybook

[SeyyedKhandon]

@yyx990803 , @shilman
I'm thinking about using vue-cli's webpack config for using storybook with vuejs, is it a proper solution?

[backbone87]

Do you use vue-cli-plugin-storybook?

[SeyyedKhandon]

@backbone87 I've used https://storybook.js.org/docs/guides/guide-vue/ automatic install which tells npx -p @storybook/cli sb init --type vue to install storybook. how should I use vue add vue-cli-plugin-storybook instead of that?

package.json:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "storybook": "start-storybook",
    "build-storybook": "build-storybook"
  },

[SeyyedKhandon]

Thank you @backbone87 , @shilman , everything is working now.

First, I stashed all changes which have been made by following the instructions of
https://storybook.js.org/docs/guides/guide-vue/ .

Then I've re-installed storybook via using vue add storybook ( https://github.com/storybookjs/vue-cli-plugin-storybook ) which creates a folder that contains webpack configs from vue-cli, which means you don't need to have any special webpack section in storybook config folder. the @ problem has been solved and every thing is fine

<img
  class="loading_logo"
  src="@/assets/images/logo.png"
  alt="company logo"
/>

But still there was one error for addressing assets in .scss url() like content:

url("assets/images/tick.svg");

I fixed it by using relative addressing using ~@ together like below:

content: url("~@/assets/images/tick.svg");

the working example is here:

https://github.com/SeyyedKhandon/vuejs-persian-chat-scaffold