CODEWITHSUNDEEP
webpackvue.jsstorybook
Tomer
Tomer

Reputation: 17930

aliases don't seem to work in vue storybook

I'm using storybook for vue to generate a styleguide and I would like to add some aliases for 'src' folder so i can easily reference components and scss files.

So i added webpack.config.js file under .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;
};

But when i try to reference an scss file i get an error:

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

I also tried with ~main but still the same.

What am i missing?

Upvotes: 1

Views: 3305

Answers (1)

lukas-reineke
lukas-reineke

Reputation: 3322

I actually don't know why (would be happy to learn if somebody knows), but you have to prepend ~ before scss / sass imports that use webpack aliases. Because of that, your ~ example won't work. But the @ should.

@import '~@/some-file';

Upvotes: 1

Related Questions