Vue项目导入CSS自动生成head内style标签，寻求替代导入方法

方法1：配置打包工具提取独立CSS文件 #

这是最直接解决“head生成style标签”的方案，让打包工具把CSS提取成单独的.css文件，通过<link>标签引入，而非内联style。

• Vite 项目：
  在vite.config.ts中调整配置，生产环境默认会提取CSS到单独文件，若需开发环境也强制提取，可添加对应配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      cssCodeSplit: true, // 生产环境默认开启，拆分CSS到独立文件
    },
    css: {
      // 开发环境也提取CSS的配置
      devSourcemap: false,
      postcss: './postcss.config.js'
    }
  })
  

  打包后CSS会生成单独文件，自动在index.html中插入<link>引用。

• Vue CLI 项目：
  在vue.config.js中开启CSS提取，可区分生产/开发环境：

  module.exports = {
    css: {
      extract: process.env.NODE_ENV === 'production' 
        ? true 
        : { // 开发环境也提取的自定义配置
            filename: 'css/[name].css',
            chunkFilename: 'css/[name].css'
          }
    }
  }
  

方法2：在public/index.html中直接引入CSS #

先把style.scss编译成style.css（用Sass命令行工具或打包脚本预编译），然后在public/index.html里用原生<link>标签引入：

<link rel="stylesheet" href="./css/style.css">

这种方式完全由浏览器原生加载，不会让Vue生成内联style标签，但需要手动处理SCSS的编译步骤。

方法3：在单文件组件的<style>中导入（控制作用域） #

如果可以接受开发环境的内联style，但想控制样式作用范围，可在App.vue（全局样式）或单个组件的<style>标签里导入：

<!-- App.vue 全局样式，不加scoped -->
<style lang="scss">
@import "@/assets/css/style.scss";
</style>

生产环境打包时，这些样式会被提取到独立CSS文件，适合不需要单独管理CSS文件，但想划分样式作用域的场景。

内容的提问来源于stack exchange，提问作者Ashish Comnet