React开发环境内嵌CSS，生产环境无style标签，如何让其在生产环境显示？

嘿，这个问题我之前帮人排查过！先看看你描述的场景：

生产环境下构建工具通常会把零散的style标签合并、提取成独立的CSS文件（甚至做压缩优化），所以你才会看不到原来的多个style标签。要让它们在生产环境也保留下来，得根据你用的构建工具调整配置，我分两种常见情况给你讲：

1. 如果你用的是Vite #

Vite默认在生产环境会自动提取CSS到单独文件，要禁用这个行为并保留inline的style标签，修改你的vite.config.js：

方案一：合并为单个style标签 #

如果只需要保留一个包含所有样式的style标签，配置如下：

export default {
  build: {
    cssCodeSplit: false, // 禁止拆分CSS代码，合并为单个style标签
  }
}

方案二：保留多个独立的style标签（比如每个组件一个） #

如果想和开发环境一样，每个组件的样式都对应单独的style标签，需要配合Vue插件的配置：

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      style: {
        injectType: 'styleTag' // 强制将组件样式注入为独立的style标签
      }
    })
  ],
  build: {
    cssCodeSplit: false // 确保不提取CSS到文件
  }
}

2. 如果你用的是Webpack（包括Vue CLI、Create React App等） #

Vue CLI 项目 #

在vue.config.js里直接禁用CSS提取即可，这样每个组件的样式会保留为独立的style标签：

module.exports = {
  css: {
    extract: false // 禁止将CSS提取到单独文件
  }
}

React/普通Webpack项目 #

生产环境默认会用mini-css-extract-plugin提取CSS，你需要替换成style-loader来注入style标签：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', // 用style-loader将CSS注入为style标签
          'css-loader'
        ]
      },
      // 如果用SCSS/SASS，加上sass-loader
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 记得移除原来的MiniCssExtractPlugin相关配置
}

注意：这样做会牺牲一部分页面加载性能，因为浏览器无法缓存独立的CSS文件了，一定要根据你的项目需求权衡利弊哦！

内容的提问来源于stack exchange，提问作者Tristão