如何将SASS与SCSS文件合并打包为单份SCSS资源包用于npm组件库

解决方案 #

方案一：SASS转译+scss-bundle组合实现 #

你之前用的scss-bundle功能已经满足需求，只需要提前把Bulma的SASS文件批量转成SCSS格式，就能直接用原流程打包，整个步骤可以嵌入构建流程自动执行：

1. 安装依赖

npm install sass scss-bundle glob --save-dev

2. 新增批量转译脚本scripts/sass-to-scss.js：

const fs = require('fs')
const path = require('path')
const glob = require('glob')
const sass = require('sass')

// 匹配bulma目录下所有SASS文件
const bulmaSassFiles = glob.sync('node_modules/bulma/**/*.sass')

bulmaSassFiles.forEach(filePath => {
  // 按原目录结构输出转译后的SCSS文件到临时目录
  const outputPath = filePath.replace('node_modules/bulma', 'temp/bulma').replace('.sass', '.scss')
  fs.mkdirSync(path.dirname(outputPath), { recursive: true })
  // 仅做语法转换，不编译为CSS，保留所有变量、混合宏定义
  const compileResult = sass.compile(filePath, {
    syntax: 'indented',
    outputStyle: 'expanded',
    sourceMap: false
  })
  fs.writeFileSync(outputPath, compileResult.css)
})

3. 修改你的入口SCSS文件引入路径：

@import "./temp/bulma/bulma.scss";
@import "./utils/variables.scss";

4. 调整构建命令，先执行转译脚本再运行scss-bundle打包即可，最终输出的单文件会包含所有Bulma样式和你的自定义代码，所有SCSS特性都可正常使用。

方案二：rollup插件直接实现 #

如果你不想多维护转译脚本，直接用rollup-plugin-styles就能实现需求，它原生支持同时识别SASS和SCSS格式，配置开启源文件输出即可：

// rollup.config.js 配置示例
import styles from 'rollup-plugin-styles'

export default {
  // 其余rollup配置保持不变
  plugins: [
    styles({
      // 直接输出SCSS源文件，不编译为CSS
      mode: 'emit',
      // 支持两种格式识别
      extensions: ['.scss', '.sass'],
      alias: {
        '~bulma': path.resolve(__dirname, 'node_modules/bulma')
      }
    })
  ]
}

关于bundle-scss的问题 #

你写的glob匹配规则没有问题，这个工具已经停止维护多年，对缩进格式的SASS原生支持就有缺陷，不需要再调整配置，直接弃用即可。

内容的提问来源于stack exchange，提问作者Chris-Jol