vite can't find stylesheet error

[chadi-kazan]

using storybook@6.5.14, vite@4.0.2 and @storybook/builder-vite@0.2.6

I keep getting [vite] Internal server error: [sass] Can't find stylesheet to import.
@import "~highcharts/css/highcharts.scss";
`
for context, my main.js is the following

const path = require('path');
const {mergeConfig} = require('vite');
module.exports = {
	stories: ["../src/**/*.stories.[tj]s[x]"],
	addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
	framework: "@storybook/react",
	core: {
		builder: "@storybook/builder-vite",
	},
	typescript: {
		check: false,
		reactDocgen: false,
	},
	features: {
		storyStoreV7: true
	},
};

highcharts.scss is imported inside a sass file in my own app's sources
I have

resolve: {
		alias: [
			{
				// this is required for the scss modules
				find: /^~(.*)$/,
				replacement: "$1",
			},
		],
	},

in my vite.config, but it doesn't seem to have any effect as the ~ is not getting replaced.
It doesn't seem to be able to process nested scss imports
and i can't think of a workaround.

[IanVS]

In storybook 6.5, we don't automatically use your vite.config settings (but in storybook 7.0 we do). If you want to stick with 6.5, you can add a viteFinal to your main.js as shown in https://github.com/storybookjs/builder-vite#customize-vite-config. Or, you can upgrade to the beta of 7.0 with npx sb@next upgrade --prerelease, which I would recommend at least trying, because there are many bugfixes and improvements in 7.0.

[chadi-kazan]

for some reason I am unable to upgrade to storybook 7. I get this error Unexpected token '||='
EDIT: already tried customizing the final config

	async viteFinal(config) {
        return mergeConfig(config, {
            css: {
                postcss: null,
                preprocessorOptions: {
                    scss: {
                        includePaths: ["node_modules"],
		        additionalData: [
			        `@import "design-system/scss/index.scss";
			        @import "material-icons/css/material-icons.scss";
			        @import "../src/components/charts/chart-styles.scss";
			        @import "highcharts/css/highcharts.scss";`
		        ]
                    },
                },
            },
        });

no luck

[IanVS]

You're running an old version of node. Storybook 7 supports node 16 and up.

[chadi-kazan]

gotcha. I switched to node 16 and storybook 7 but it still feels like it is not picking the config from vite.config. I get an error in my stories saying process is not defined even though i have the node globals polyfill plugin enabled

				GlobalsPolyfills({
					process: true,
					buffer: true,
				}),

[IanVS]

Can you share a reproduction? I'm not familiar with that plugin.

[chadi-kazan]

It's the @esbuild-plugins/node-globals-polyfill plugin.
with and without it running storybook complains that process is not defined.
I'll try to setup a code sandbox during the day