ReactJS与StoryBook能否共用SCSS文件？及Table组件样式不生效求助

以下是几种可行的解决方案，按从简单到全局配置的顺序排列：

1. 在Story文件中直接引入组件SCSS #

这是最直接的方式，适合单个组件的样式文件：
在你的Table组件对应的Story文件（比如Table.stories.js/Table.stories.tsx）顶部添加：

import './Table.scss';

确保路径和你的SCSS文件位置匹配，比如如果SCSS和Story文件在同一目录下就用相对路径，不在的话调整为../components/Table.scss这类正确路径。

2. 全局引入SCSS文件 #

如果你的Table样式是全局共用的，或者想一次性引入所有组件样式，可以在StoryBook的预览配置文件中添加引入：

• 打开.storybook/preview.js（StoryBook 6.x及7.x通用），在文件开头添加：

import '../src/path/to/Table.scss';

替换路径为你项目中Table.scss的实际位置。

3. 配置Webpack处理SCSS（自定义场景） #

如果你的项目有特殊的SCSS处理规则（比如使用CSS模块、自定义变量等），需要修改StoryBook的Webpack配置：

1. 先安装必要依赖（如果还没装）：

npm install sass sass-loader css-loader style-loader --save-dev

2. 打开.storybook/main.js，添加webpackFinal配置：

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    // 添加SCSS处理规则
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

4. 使用StoryBook SCSS预设 #

如果你不想手动配置Webpack，可以用官方提供的SCSS预设：

1. 安装依赖：

npm install @storybook/preset-scss sass sass-loader css-loader style-loader --save-dev

2. 在.storybook/main.js中添加预设：

module.exports = {
  presets: ['@storybook/preset-scss'],
};

做完以上操作后，重启StoryBook服务，样式应该就能正常生效了。如果还是不行，检查一下路径是否正确，或者SCSS文件本身有没有语法错误。

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