Vue Vite项目全局Stylus变量无法在SFC中生效的问题

一、修复Style部分全局变量不生效的问题 #

你当前的配置存在两个核心问题，导致Stylus变量未被正确导入：

1. 预处理器配置键错误：Vite中Stylus对应的配置键是stylus，而非styl
2. 路径解析不确定性：additionalData中的@别名可能无法被预处理器正确识别，建议改用绝对路径规避问题

修正后的Vite配置 #

import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      stylus: {
        // 使用绝对路径确保导入路径准确，末尾加分号避免Stylus语法报错
        additionalData: `@import "${path.resolve(__dirname, './src/styles/styles.styl')}";`
      }
    }
  }
})

SFC中正确使用变量 #

Stylus变量无需添加$前缀，直接使用变量名即可：

<style lang="stylus" scoped>
#main-container
  padding: contentSideMargin
</style>

二、在Script部分全局使用Stylus变量 #

Stylus变量属于样式层语法，无法直接在JS中读取，需要通过导出转换实现：

1. 在Stylus文件中导出变量 #

修改styles.styl，添加:export块将变量转换为JS可识别的格式：

contentSideMargin = 50px

// 导出给JS使用
:export
  contentSideMargin: contentSideMargin

2. 全局挂载变量（两种可选方式） #

方式一：挂载到Vue全局属性

在main.js中导入并挂载变量：

import { createApp } from 'vue'
import App from './App.vue'
import styles from '@/styles/styles.styl'

const app = createApp(App)
// 将样式变量挂载到全局属性
app.config.globalProperties.$styles = styles
app.mount('#app')

在SFC的script中使用：

<script setup>
import { getCurrentInstance } from 'vue'

const { appContext } = getCurrentInstance()
const $styles = appContext.config.globalProperties.$styles
console.log($styles.contentSideMargin) // 输出 "50px"
</script>

方式二：使用Provide/Inject全局注入

在main.js中提供变量：

import { createApp } from 'vue'
import App from './App.vue'
import styles from '@/styles/styles.styl'

const app = createApp(App)
app.provide('styles', styles)
app.mount('#app')

在SFC的script中注入使用：

<script setup>
import { inject } from 'vue'
const styles = inject('styles')
console.log(styles.contentSideMargin) // 输出 "50px"
</script>

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