Vue.js项目中如何关联SCSS文件解决全局样式不生效问题

你当前遇到的问题是_base.scss属于全局SCSS文件，没有被项目全局注册也没有在组件内显式引入，所以其中的全局样式、SCSS变量都不会被编译到最终项目样式文件中，自然不会生效。下面分两种主流构建场景给出配置方案：

场景1：项目使用Vue CLI（webpack脚手架） #

• 在项目根目录找到vue.config.js，如果不存在就手动新建该文件
• 新增如下配置，将全局SCSS文件自动注入到所有组件的style块和全局样式中：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // sass-loader@8及以下版本用prependData，@10及以上版本用additionalData
        additionalData: `@import "~@/styles/_base.scss";`
        // 路径替换为你自己项目中_base.scss的实际路径，@默认指向src目录
      }
    }
  }
}

• 修改完配置后重启项目即可生效

场景2：项目使用Vite构建 #

• 找到项目根目录的vite.config.js文件
• 新增如下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/_base.scss";`
        // 路径替换为你自己项目中_base.scss的实际路径
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

• 重启项目即可生效

临时验证方案 #

如果只需要先测试效果，可以直接在AppHeader.vue的style块顶部手动引入_base.scss：

<style lang="scss">
/* 路径替换为你项目中_base.scss相对AppHeader.vue的实际路径 */
@import "../styles/_base.scss";
.header {
  background: $accent;
  text-align: center;
  padding: 10px;
}

.aright {
  text-align: right;
}
</style>

提示：如果有多个全局SCSS文件（比如变量文件、mixin文件、基础样式文件），可以按依赖顺序在additionalData中写多个@import语句即可。

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