Global SCSS Variables are not found using Vite and generate build error

See original GitHub issue

Describe the bug Storybook does not load the scss variables using when using Vite. The Vue3 project requires the variables to be loaded throught the css.preprocessorOptions.scss.aditionalData in the vite.config.ts. This works fine when running the project (yarn dev), but Storybook (yarn storybook) seems to ignore that configuration as I get the same error when running the project without that configuration option.

To Reproduce All is wrapped up in this branch: I tried publishing to Chromatic, but since this generates a build error it is impossible to create an artifact to publish.

Note: this has not been done with the npx sb@next command, but it is the minimal required effort to reproduce. I am making a boilerplate library after all. Running the sb@next command I saw that it was using the vue cli, which is using webpack configuration, which is a different situation than the bug anyways. This is a boilerplate/template project, so next to some configuration there is next to no content included.

I did try to reproduce using the command, and that attempt can be found here (chose Vue3 as framework with vue3 as template and directory vue3). Is it just me, or does that not add storybook anywhere, just vue3 created with vue-cli?

It is a vue 3 library project
Created with Vite
using typescript
added storybook
added (dart) sass
added some css and scss files
tried to use a variable from a global scss in a vue component
starting storybook using yarn storybook shows the page, but with the error shown in the image above on every page/story.

If it is still usefull to do the sb@next repro command in a different way, please let me know, but it seems redundant with this configuration and previous results.

System Environment Info:

System: OS: Windows 10 10.0.19043 CPU: (4) x64 Intel® Core™ i7-6500U CPU @ 2.50GHz Binaries: Node: 16.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 3.2.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)

note that I am using nvm for node management

Additional context I eventually I intend to make this a library project, inlcuding rollup publications, testing etc.

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:6

Top GitHub Comments

7reactions

hexagon06commented, Jul 25, 2022

Thank you @tarsusi and @MatheusNascimentoti99. Both of your code combined resolved this issue for me. The way using the path library did not work for me and generated the error above. Using the vite configuration in the vite.config.ts only did not do the trick either.

So this is the final working code in main.js

async viteFinal(config) {
        return mergeConfig(config, {
            css: {
                postcss: null,
                preprocessorOptions: {
                    scss: {
                      additionalData: `
                        @import '../src/styles/variables.scss';
                        @import '../src/styles/classes.scss';
                      `
                    },
                },
            },
        });
    },

still requiring the configuration in the vite.config.ts too, to be able to build the code for library publish purposes:

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "./src/styles/variables.scss";
          @import "./src/styles/classes.scss";
        `,
      },
    },
  },

I will keep this issue open for triage since I think there should be documentation for this kind of information.

4reactions

tarsusicommented, Jul 21, 2022

Hello @hexagon06,

I had the same issue yesterday and after searching any solution I came up with this solution. You can override or extend configurations on your .storybook/main.js like this:

const path = require('path');
const {mergeConfig} = require('vite');

module.exports = {
  "stories": [
      "../src/**/*.stories.mdx",
      "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
      "@storybook/addon-links",
      "@storybook/addon-essentials",
      "@storybook/addon-interactions"
  ],
  "framework": "@storybook/vue3",
  "core": {
      "builder": "@storybook/builder-vite"
  },
  "features": {
      "storyStoreV7": true
  },
  async viteFinal(config) {
        return mergeConfig(config, {
            css: {
                postcss: null,
                preprocessorOptions: {
                    scss: {
                        additionalData: `
                            @import "${path.resolve(__dirname, '../src/styles/variables')}";
                        `,
                    },
                },
            },
        });
    },
}

I hope this can solve your problem.