如何在Vite+Storybook中使用SCSS？导入公司包报错求助

1. 明确核心问题 #

旧写法里的~是Webpack时代Sass加载器的专属语法，Vite的Sass处理逻辑不支持该前缀，改成@use是正确方向，但新报错说明Vite无法解析@company/package/foo/bar对应的文件，问题出在包结构或Vite的模块解析配置上。

2. 排查包结构与路径 #

直接打开项目的node_modules/@company/package目录，确认样式文件的实际位置：

• 如果样式文件在src/foo/bar.scss，修改导入路径为@company/package/src/foo/bar
• 如果样式文件在dist/foo/bar.css，修改导入路径为@company/package/dist/foo/bar

3. 给Storybook配置Vite别名 #

如果包内样式文件路径较深，或Vite默认解析不到，在.storybook/main.ts的viteFinal中添加别名配置：

import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';
import path from 'path'; // 新增path模块导入

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      optimizeDeps: {
        include: ['storybook-dark-mode'],
      },
      resolve: {
        alias: {
          // 按需调整别名指向的实际路径
          '@company/package/foo': path.resolve(__dirname, '../node_modules/@company/package/foo'),
        },
      },
    });
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

4. 检查包的exports配置 #

如果@company/package的package.json中存在exports字段，必须明确导出样式文件路径，否则Vite会限制访问未声明的路径：

// @company/package/package.json
{
  "exports": {
    "./foo/bar": "./foo/bar.scss",
    // 其他导出项...
  }
}

5. 验证导入语法 #

确保@use后的路径无需加文件后缀（Sass会自动识别.scss/.sass文件），最终写法示例：

@use '@company/package/foo/bar';

内容的提问来源于stack exchange，提问作者markatathena