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

Question

我正在使用vue 的故事书来生成样式指南，并且我想为“src”文件夹添加一些别名，以便我可以轻松地引用组件和 scss 文件。

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

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 文件时，我得到一个错误：

模块构建失败：@import "~/main"; ^ 找不到或无法读取要导入的文件：~/main.

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

我错过了什么？

Answer 1

我实际上不知道为什么（如果有人知道会很高兴知道），但是您必须在使用 webpack 别名的/导入~之前添加。因此，您的示例将不起作用。但是应该的。scsssass~@

@import '~@/some-file';