别名似乎在 vue 故事书中不起作用

Question

我正在使用 storybook for vue 生成样式指南，我想为 'src' 文件夹添加一些别名，以便我可以轻松引用组件和 scss 文件。

所以我在 .storybook 下添加了 webpack.config.js 文件：

const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    include: path.resolve(__dirname, "../src/scss")
  });

  defaultConfig.resolve.extensions.push(".scss");
  defaultConfig.resolve.alias = {
    ...defaultConfig.resolve.alias,
    "@": path.resolve(__dirname, "../src"),
    "~": path.resolve(__dirname, "../src/scss")
  };

  return defaultConfig;
};

但是当我尝试引用 scss 文件时出现错误：

Module build failed: @import "~/main"; ^ File to import not found or unreadable: ~/main.

我也试过 ~main 但还是一样。

我错过了什么？

Answer 1

我其实不知道为什么（如果有人知道我会很乐意学习），但是你必须在使用 webpack 别名的 scss / sass 导入之前添加 ~ .因此，您的 ~ 示例将不起作用。但是 @ 应该。

@import '~@/some-file';

别名似乎在 vue 故事书中不起作用

aliases don't seem to work in vue storybook

webpack

vue.js

storybook