In this component, I am importing an image using src="@/assets/images/logo.png" with the help of @ for addressing:
<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>
However, when trying to use npm run storybook, I encounter two errors related to the above issues. How can I resolve these errors?
Update:
The error regarding the image is as follows:
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
In my ./storybook/webpack.config.js file, I am able to address imports like
import "../src/assets/styles/components/_Loading.scss"@/ for addressing:
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;
};
Being a common issue, I have reached out on Storybook's GitHub page to request compatibility mode for this problem.