如何在Nuxt中将所有CSS提取合并为单个文件？

完全可以实现将所有SCSS样式（包括Bootstrap）合并为单个CSS文件，适配你不需要拆分组件CSS、方便ASP.NET项目直接引入的场景，具体配置步骤如下：

1. 确认依赖安装 #

确保项目已安装必要的预处理器和Bootstrap：

npm install sass sass-loader bootstrap --save-dev

2. 修改Nuxt配置文件（nuxt.config.js/ts） #

根据你使用的Nuxt版本调整配置，核心是启用CSS提取并强制合并为单个文件：

针对Nuxt 2 #

在配置中指定全局CSS文件，并开启extractCSS并统一输出文件名：

export default {
  // 引入所有需要编译的SCSS文件（顺序很重要，变量文件要放在Bootstrap之前）
  css: [
    '@/assets/scss/custom-bootstrap-vars.scss', // 自定义Bootstrap变量（可选）
    'bootstrap/scss/bootstrap.scss',
    '@/assets/scss/global-styles.scss' // 你的全局SCSS样式
  ],

  build: {
    // 启用CSS提取，合并为单个文件
    extractCSS: {
      filename: 'css/ui-kit.css', // 指定输出的单个CSS文件名
      chunkFilename: 'css/ui-kit.css' // 确保chunk样式也合并到同一个文件
    }
  }
}

针对Nuxt 3（Vite构建） #

Nuxt 3默认用Vite，需要在Vite配置中调整资源输出规则：

export default defineNuxtConfig({
  css: [
    '@/assets/scss/custom-bootstrap-vars.scss',
    'bootstrap/scss/bootstrap.scss',
    '@/assets/scss/global-styles.scss'
  ],

  vite: {
    build: {
      rollupOptions: {
        output: {
          // 强制所有CSS输出为单个文件
          assetFileNames: (assetInfo) => {
            if (assetInfo.name.endsWith('.css')) {
              return 'css/ui-kit.css';
            }
            return assetInfo.name;
          }
        }
      }
    }
  }
})

3. 编译并获取单个CSS文件 #

运行构建命令：

npm run build

构建完成后，在项目的dist/css目录下会生成你指定的ui-kit.css文件，这个文件包含了所有Bootstrap样式和你的SCSS代码，客户可以直接在ASP.NET项目中通过<link>标签引入该文件。

额外注意点 #

• 组件内的<style scoped>样式也会被自动合并到这个单个CSS文件中，无需额外配置。
• 如果需要覆盖Bootstrap默认样式，一定要把自定义变量文件放在Bootstrap源文件之前引入，确保变量生效。

内容的提问来源于stack exchange，提问作者Sam St Aubyn