【发布时间】：2020-06-15 18:59:56
【问题描述】：
我有一个简单的组件，如您在此处看到的，它通过src="@/assets/images/logo.png" 使用@ 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>
这是我的故事，我在这里导入但似乎不起作用：
import Loading from "../src/views/components/loading/Loading";
import "../src/assets/styles/components/_Loading.scss";
export default {
title: "Loading"
};
export const normalLoading = () => ({
components: { Loading },
template: "<Loading></Loading>",
});
当我使用 npm run storybook 时，它会显示两个错误，一个对应于上述每个问题。我应该如何解决这些问题？
更新
图片的错误是：
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
这是我的./storybook/webpack.config.js 文件，它正在处理import "../src/assets/styles/components/_Loading.scss"; 之类的寻址，但我想使用@/ 进行寻址：
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;
};
更新2
由于这个问题似乎很普遍，我在https://github.com/storybookjs/storybook/issues/11117 上用reprex 询问了它。
更新3
我在 storybook GitHub 上问了这个问题，看来他们需要为此添加兼容模式，如果你愿意为 vuejs-webpack-storybook (https://github.com/storybookjs/storybook/issues/11117) 贡献，这是链接
【问题讨论】：
-
有什么错误？我以前没用过故事书，但你可能需要在你的项目中添加一个 scss 加载器。 webpack.js.org/loaders/sass-loader
-
img 解析错误只在使用
@别名时显示？我在你的 webpack 配置中没有看到这个。如果你使用vue-cli，你可以使用vue inspect --rules和vue inspect --rule <image/scss>检查合并的webpack配置 -
它根本不起作用，但是如果使用
src="/src/assets/images/logo.png"然后使用"storybook": "start-storybook -s ./ -p 6006"运行storybook，它将正确运行和加载，但这不是我想要的。我只想使用 @ 来处理它。 -
其实github上有很多关于
storybook.js和其他使用webpack的框架互相干扰的问题。尝试在这些 cmets 中找到解决方案。 github.com/storybookjs/storybook/issues/3339github.com/storybookjs/storybook/issues/44google 更多讨论：storybook js webpack alias "@" -
还可以查看这些示例：storybook.js.org/docs/configurations/custom-webpack-config/… storybook.js.org/docs/configurations/custom-webpack-config/… "请注意，Storybook 为自己的 UI（也称为“管理器”）有一个完全独立的 webpack 配置，因此您进行的自定义仅适用于您的故事的呈现”
标签： javascript vue.js webpack sass storybook