Vite库模式下如何阻止Vue SFC中SCSS编译为CSS

要实现将Vue单文件组件内的SCSS代码提取为未编译的.scss文件（保留可覆盖变量），而非编译成CSS，需要通过自定义插件拦截样式处理流程，跳过编译并收集原始SCSS代码。以下是两种可行方案：

方案一：自定义Vite插件实现提取 #

1. 编写提取SCSS的自定义插件 #

创建vite-plugin-extract-scss.js文件，用于拦截Vue组件的style块并收集SCSS代码：

import fs from 'fs';
import path from 'path';

export default function extractScss() {
  let collectedScss = '';

  return {
    name: 'extract-scss',
    // 处理Vue单文件组件，提取SCSS代码
    transform(code, id) {
      if (id.endsWith('.vue') && code.includes('lang="scss"')) {
        const scssMatch = code.match(/<style scoped lang="scss">(.*?)<\/style>/s);
        if (scssMatch) {
          // 收集原始SCSS内容
          collectedScss += scssMatch[1].trim() + '\n';
          // 移除组件内的style块，避免Vite编译
          return code.replace(/<style scoped lang="scss">(.*?)<\/style>/s, '');
        }
      }
    },
    // 构建完成后将收集的SCSS写入文件
    writeBundle() {
      const outputPath = path.resolve(__dirname, 'dist/style.scss');
      fs.writeFileSync(outputPath, collectedScss);
    }
  };
}

2. 配置Vite禁用默认CSS编译 #

修改vite.config.ts，禁用Vue插件的样式处理逻辑，并引入自定义插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import extractScss from './vite-plugin-extract-scss';

export default defineConfig({
  plugins: [
    vue({
      // 完全禁用Vue插件对style块的编译处理
      style: false
    }),
    extractScss()
  ],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyComponentLibrary',
      fileName: (format) => `my-library.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      },
      // 清空默认CSS相关插件，避免编译SCSS
      plugins: []
    },
    cssCodeSplit: false,
    assetsDir: '' // 不生成资源目录，避免冗余文件
  }
});

方案二：基于Rollup插件实现 #

若更倾向直接使用Rollup配置，可通过rollup-plugin-vue配合自定义逻辑实现：

// rollup.config.js
import vue from 'rollup-plugin-vue';
import fs from 'fs';
import path from 'path';

let collectedScss = '';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/my-library.js',
    format: 'esm',
    name: 'MyComponentLibrary'
  },
  external: ['vue'],
  plugins: [
    vue({
      // 禁用SCSS编译为CSS
      style: { compile: false },
      // 自定义处理style块，提取SCSS代码
      customBlocks: [
        {
          type: 'style',
          process(block) {
            if (block.attrs.lang === 'scss' && block.attrs.scoped) {
              collectedScss += block.content.trim() + '\n';
              return ''; // 移除原style块，阻止后续处理
            }
            return block.content;
          }
        }
      ]
    }),
    // 构建完成后写入SCSS文件
    {
      name: 'write-scss-file',
      writeBundle() {
        fs.writeFileSync(path.resolve('dist/style.scss'), collectedScss);
      }
    }
  ]
};

注意事项 #

• 若组件使用了scoped样式，提取的SCSS会保留原始代码；若需要保留scoped生成的属性选择器（如[data-v-xxx]），需额外调整插件的匹配逻辑
• 可根据需求修改收集逻辑，比如按组件拆分多个SCSS文件，或添加统一的变量文件导入
• 构建后检查dist目录，确认生成的style.scss为未编译的原始SCSS代码，且无多余的CSS文件生成

内容的提问来源于stack exchange，提问作者Abrar Ul haque