为何Vue开发环境样式注入头部、生产构建打包至app.css？如何统一？

要让开发环境（npm run dev）和生产构建（npm run build）的样式处理逻辑一致，只需修改vue.config.js中的css.extract配置，以下是两种可选方案：

方案1：统一不提取样式（均注入页面头部） #

将css.extract固定设置为false，这样不管开发还是构建，组件内<style lang="scss">的样式都会注入到页面头部：

module.exports = {
  css: {
    extract: false
  }
}

方案2：统一提取样式（均打包到单独CSS文件） #

将css.extract固定设置为true，这样开发和构建时，样式都会被打包到单独的CSS文件（如app.css）：

module.exports = {
  css: {
    extract: true
  }
}

补充说明：css.extract的默认行为是生产环境为true，开发环境为false，这就是导致两者样式处理逻辑不同的原因，手动指定固定值即可统一行为。

内容的提问来源于stack exchange，提问作者Nguyễn Dương