发布Storybook组件到npm后，如何解决.scss文件无法解析的问题？

问题核心 #

你用Babel打包Storybook组件时，Babel只会转译JS/JSX文件，不会把SCSS文件复制到dist目录，但转译后的JS代码里依然保留了require("./button.scss")的引用，导致新项目安装包后找不到对应的SCSS文件，触发报错。

解决方案 #

方案1：用copyfiles复制SCSS文件到dist #

这是最简单的临时修复方案，直接把源文件中的SCSS复制到dist对应目录：

1. 安装依赖：

npm install copyfiles --save-dev

2. 修改package.json中的build脚本，先转译JS再复制SCSS：

"build": "cross-env BABEL_ENV=production babel src -d dist && copyfiles -u 1 src/**/*.scss dist/"

• -u 1参数的作用是去掉源路径的第一个层级（比如src/stories/Button/button.scss会被复制到dist/stories/Button/button.scss，而不是dist/src/stories/Button/button.scss）

方案2：用Webpack打包（推荐用于组件库） #

Babel本身不处理样式文件，Webpack能更完整地处理组件的打包流程，包括编译SCSS、处理依赖、输出符合npm规范的包：

1. 安装必要依赖：

npm install webpack webpack-cli css-loader sass-loader style-loader babel-loader --save-dev

2. 在项目根目录新建webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'my-storybook',
    libraryTarget: 'umd', // 支持多种模块导入方式（CommonJS/ES Modules/AMD）
  },
  module: {
    rules: [
      // 转译JS/JSX
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // 编译SCSS为CSS并注入到页面
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  // 避免把React打包进组件库，让用户项目自行提供React依赖
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
};

3. 修改package.json的build脚本：

"build": "webpack --mode production"

如果希望把CSS单独输出成文件（而非嵌入JS），可以额外安装mini-css-extract-plugin，并修改webpack配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 在module.rules里替换style-loader为MiniCssExtractPlugin.loader
{
  test: /\.scss$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
// 在plugins数组中添加
plugins: [new MiniCssExtractPlugin()],

方案3：内联样式（应急方案） #

把SCSS的样式转换成JS对象，直接通过组件的style属性或CSS-in-JS库（如styled-components）来实现样式，完全避免依赖外部SCSS文件。这种方式适合简单组件，复杂组件不推荐。

额外注意事项 #

• 发布npm包前，确保package.json的files字段包含dist目录，避免遗漏文件：

"files": ["dist"]

• 如果用Webpack方案，确认externals配置正确，防止组件库体积过大，同时避免版本冲突。

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