Loading scss files in storybook not working

[IvayloWogi]

Hello, I'm trying to load my scss files in a storybook project. I use Nuxt as framework and followed the installation guide from https://storybook.nuxtjs.org/. I have created a .storybook folder with main.js, preview.js and preview-head.html(to load Buefy from a CDN) files:

My main.js file contains the following code:

const path = require('path');

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        "style-loader",
        // Translates CSS into CommonJS
        "css-loader",
        {
          // Compiles Sass to CSS
          loader: "sass-loader",
          options: {
            additionalData: `@import "./assets/main.scss";@import "./assets/style-resources.scss";`,
            includePaths: [__dirname, "./assets/**/*"],
          },
        },
      ],
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "assets"),
          "~": path.resolve(__dirname, "assets"),  // point these to where you need it to go
        },
      },
    });

    // Return the altered config
    return config;
  },

  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ]
}

then the preview.js:

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import Buefy from 'buefy'
import Vue from 'vue'

Vue.use(Buefy)

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    extended: true,
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  viewport: {
    vieports: INITIAL_VIEWPORTS
  }
}

and here are the dependencies from my package.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "storybook": "start-storybook -c .storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "nuxt-buefy": "^0.4.8"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/eslint-parser": "^7.15.8",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/storybook": "^4.1.1",
    "@nuxtjs/style-resources": "^1.2.1",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/addon-viewport": "^6.3.12",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/vue": "^6.3.12",
    "babel-loader": "^8.2.3",
    "css-loader": "^4.3.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^7.20.0",
    "prettier": "^2.4.1",
    "sass": "^1.43.4",
    "sass-loader": "7.1.0",
    "sass-resources-loader": "^2.2.4",
    "style-loader": "^2.0.0",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "2.5.0",
    "stylelint-config-recommended": "^5.0.0",
    "stylelint-config-recommended-scss": "^4.3.0",
    "stylelint-order": "4.1.0",
    "stylelint-prettier": "^1.2.0",
    "stylelint-scss": "^3.21.0",
    "vue-loader": "^15.9.8",
    "webpack": "^4.43.0"
  }

My scss files are in the assets folder and it has the following structur:

• assets
  • components
    • _button.scss
  • variables
    • _button.scss
  • main.scss - where I load the styles from the components folder
  • style-resources.scss - where I load the content from the variables folder

So when I run storybook, it visualizes the component, but the scss-styles are not applied.

[farnabaz]

Hey, Thank you for creating issue, do you mind creating a reproduction sample based on starter example?

[tobiasdiez]

v4 of this module is no longer actively supported. Please try the newest version and open an new issue if the problem persists. Thank you for your understanding.