无法使用Webpack + React访问Storybook中的全局SCSS变量

resolve: {
  alias: {
    '@globalStyles': path.resolve(__dirname, 'path/to/globalStyles.scss')
  }
}

import '@globalStyles';

const path = require('path');

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../path/to/globalStyles.scss')
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

import React from 'react';

const GlobalStylesContext = React.createContext({});

export const GlobalStylesProvider = ({ children, globalStyles }) => {
  return (
    <GlobalStylesContext.Provider value={globalStyles}>
      {children}
    </GlobalStylesContext.Provider>
  );
};

export const useGlobalStyles = () => {
  return React.useContext(GlobalStylesContext);
};

import React from 'react';
import { GlobalStylesProvider } from './globalStylesContext';
import globalStyles from 'path/to/globalStyles.scss';

const App = () => {
  return (
    <GlobalStylesProvider globalStyles={globalStyles}>
      {/* 应用程序的其他组件 */}
    </GlobalStylesProvider>
  );
};

import React from 'react';
import { useGlobalStyles } from './globalStylesContext';

const MyComponent = () => {
  const globalStyles = useGlobalStyles();

  // 使用全局SCSS变量
  return (
    <div style={{ color: globalStyles.color }}>
      {/* 组件的内容 */}
    </div>
  );
};