如何通过Vite原样导出未编译的quasar-variables.sass文件？

当然可行，有两种常用方案可以实现你的需求：

方案1：通过Vite配置额外输出未编译文件 #

修改vite.config.js，利用Rollup的additionalAssets配置，直接将目标Sass文件作为静态资源输出，不经过编译流程：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import fs from 'fs'

export default defineConfig({
  plugins: [
    vue({ template: { transformAssetUrls } }),
    quasar({ sassVariables: 'src/style/_quasar-variables.sass' })
  ],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'YourLibName',
      formats: ['es', 'umd'],
      fileName: (format) => `your-lib-name.${format}.js`
    },
    rollupOptions: {
      external: ['vue', 'quasar'],
      output: {
        globals: { vue: 'Vue', quasar: 'Quasar' },
        // 配置额外输出未编译的Sass变量文件
        additionalAssets: [
          {
            type: 'asset',
            source: fs.readFileSync('src/style/_quasar-variables.sass', 'utf-8'),
            fileName: 'style/_quasar-variables.sass' // 指定输出的路径和文件名
          }
        ]
      }
    }
  }
})

方案2：直接在package.json中包含源文件 #

如果不需要经过Vite构建处理，直接将源Sass文件纳入发布包，修改package.json：

// package.json
{
  "name": "your-lib-name",
  "version": "1.0.0",
  "files": [
    "dist",
    "src/style/_quasar-variables.sass" // 明确包含需要导出的源文件
  ],
  "main": "./dist/your-lib-name.umd.js",
  "module": "./dist/your-lib-name.es.js",
  "exports": {
    ".": {
      "import": "./dist/your-lib-name.es.js",
      "require": "./dist/your-lib-name.umd.js"
    },
    "./quasar-variables": "./src/style/_quasar-variables.sass" // 给其他项目提供导入入口
  }
}

其他项目使用时，直接导入即可：

@import 'your-lib-name/quasar-variables'

注意点 #

• 方案1中要确保Node环境的fs模块可用，Vite构建时默认支持。
• 方案2要注意打包后包内的文件路径是否正确，建议执行npm pack后查看压缩包内的结构。
• 不要盲目包含整个src目录，只指定需要的变量文件，避免包体积过大。

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