'Storybook/Vue: style not applied

I installed storybook via the vue-cli and added a .scss file in my preview.js:

import "assets/scss/core.scss";

import Vue from "vue";
import CompositionApi from "@vue/composition-api";
Vue.use(CompositionApi);

where "assets" is an alias configured in my vue.config.js to refer to the src/assets path. According to the docs :

The webpack config used for storybook is resolved from vue-cli-service, which means you don't need to have any special webpack section in storybook config folder. So the path should ne correctly resolved, right ? However the style does not seem to be loaded as it is not applied to my components. Am I missing something ?

FYI, here is my main.js:

module.exports = {
  core: {
    builder: "webpack5",
  },
  stories: ["../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
  ],
};

And my vue.config.js :

const path = require("path");

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        //aliases go here
        "@": path.resolve(__dirname, "src"),
        assets: path.resolve(__dirname, "./src/assets"),
      },
    },
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import 'assets/scss/variables';`,
      },
    },
  },
};

Thanks !



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source