Question

我正在使用storybook for 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

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

@import '~@/some-file';

别名似乎不适用于vue故事书

1 个答案: