React TS组件库构建时如何将Sass编译为CSS？

你正在构建可复用的React TypeScript组件库，当前使用构建脚本：

"build": "rimraf dist && NODE_ENV=production npx babel --extensions .ts,.tsx ./src/lib -d ./dist --copy-files"

该脚本可完成TS/TSX代码构建，但未将Sass文件编译为CSS，导致未安装Sass的项目使用组件库时崩溃。以下是两种可行解决方案：

方案一：构建过程中将SCSS编译为CSS（推荐） #

Babel本身不处理SCSS，需配合sass命令行工具完成编译，修改构建脚本即可实现：

1. 更新package.json的build脚本
   在Babel编译前加入SCSS编译步骤，同时忽略原SCSS文件的复制：

   "build": "rimraf dist && NODE_ENV=production sass ./src/lib:./dist --no-source-map && npx babel --extensions .ts,.tsx ./src/lib -d ./dist --copy-files --ignore '*.scss'"
   

   • sass ./src/lib:./dist：将src/lib下所有SCSS文件编译为同名CSS文件，输出到dist对应目录
   • --no-source-map：生产环境关闭源码映射，减少产物体积
   • --ignore '*.scss'：阻止Babel复制原SCSS文件到dist目录

2. 调整组件内样式导入路径
   将组件中导入SCSS的语句，从import './xxx.scss'改为import './xxx.css'，确保代码引用编译后的CSS文件。

方案二：强制依赖自动安装Sass（不推荐） #

若不想编译SCSS，可将sass从devDependencies移至dependencies，这样用户安装组件库时，Sass会被自动安装到用户项目中：

"dependencies": {
  // ...其他依赖
  "sass": "^1.63.6"
},
"devDependencies": {
  // 移除devDependencies中的sass
}

此方案会增加用户项目的依赖体积，仅适合必须保留SCSS源码的场景。

额外注意事项 #

• 若组件库使用CSS Modules，需额外配置sass编译参数或配合babel-plugin-css-modules-transform处理类名哈希
• 若要发布组件库到npm，需将private字段改为false，并添加main和types字段指定产物入口：

  "main": "dist/index.js",
  "types": "dist/index.d.ts"
  

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