如何在Rollup构建npm包时同步提供SASS变量、mixins等资源？

核心逻辑很简单：SASS变量、mixin属于供下游项目编译时调用的源文件资源，不需要被Rollup编译转成CSS，只要在构建流程里把这些文件原封不动拷贝到dist对应目录即可，不需要对sass编译插件做特殊改造。

• 推荐方案：使用官方生态的拷贝插件实现，适配全平台、配置灵活
  1. 先安装开发依赖：
     npm install @rollup/plugin-copy -D
  2. 在你的rollup.config.js配置中添加插件项，原有配置全部保留即可：

import copy from '@rollup/plugin-copy';
// 其他你原本在用的import，比如resolve、babel、sass插件等

export default {
  // 原有input、output配置保持不变
  plugins: [
    // 原有其他插件按顺序放在前面即可
    copy({
      targets: [
        // 按照你的实际源文件路径修改：下面示例是把src/sass目录下所有.sass文件，拷贝到产物的dist/sass目录
        { src: 'src/sass/**/*.sass', dest: 'dist/sass' }
      ]
    })
  ]
}

配置完成后正常执行build命令，你预置的mixins.sass、变量文件等所有sass源文件都会完整输出到dist/sass路径下，下游项目直接用@import '~my-lib/dist/sass/mixins'就能正常引入，mixin和变量可以直接调用。

• 轻量方案：不装额外插件，用构建钩子自动拷贝
  如果不想加额外Rollup插件，可以直接在package.json的scripts里加postbuild钩子，构建完成后自动执行拷贝：
  跨平台兼容写法（先装个轻量的shx工具适配windows：npm i shx -D）：

  {
    "scripts": {
      "build": "rollup -c",
      "postbuild": "shx cp -r src/sass dist/sass"
    }
  }
  

  非windows环境可以直接不用shx，把postbuild命令改成cp -r src/sass dist/sass即可，效果和插件方案完全一致。

注意避坑：不要用rollup的sass编译插件（比如rollup-plugin-sass、rollup-plugin-postcss）去处理这些mixin/变量文件，这类插件会把SASS编译为最终CSS，过程中会直接丢弃mixin、变量这类仅在编译阶段生效的逻辑，下游拿到的是编译后的CSS文件，根本没法调用mixin。这类静态SASS源文件直接拷贝，不需要做任何转译处理。

配置完可以先本地跑一次build，检查dist目录下的文件结构是否符合预期，再推包发布即可。

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