Vue Vite下如何在JS文件中正确获取Stylus导出的变量值？

问题分析 #

你当前导入Stylus文件后得到的是字符串形式的export { ... }内容，而非可直接访问属性的JS对象，这是因为Vite没有正确解析Stylus的:export语句，将其当作了普通CSS文本处理。

解决方法 #

方法1：分离全局变量与JS导出模块 #

把全局注入的样式变量和供JS导入的导出内容拆分，避免全局配置干扰模块解析：

1. 创建仅存放全局Stylus变量的文件global-vars.styl：

   // global-vars.styl
   boxShadow = 0px 0px 15px 0px rgba(0,0,0,.07)
   

2. 在vite.config.js中全局注入这个变量文件：

   // vite.config.js
   export default defineConfig({
     css: {
       preprocessorOptions: {
         stylus: {
           additionalData: `@import '@/styles/global-vars.styl'`
         }
       }
     }
   })
   

3. 创建专门用于JS导出的文件export-vars.styl：

   // export-vars.styl
   @import './global-vars.styl'
   
   :export {
     boxShadow: boxShadow;
   }
   

4. 在JS中导入这个导出文件：

   // otherFile.js
   import variables from '@/styles/export-vars.styl'
   
   export function sample () {
     console.log(variables.boxShadow) // 正常输出阴影值
   }
   

方法2：修正原文件的导出语法（不拆分文件） #

直接修改variables.styl的导出语法为标准键值对格式，确保Vite能正确解析：

// variables.styl
boxShadow = 0px 0px 15px 0px rgba(0,0,0,.07)

:export {
  boxShadow: boxShadow;
}

此时保持原全局注入配置不变，直接导入variables.styl即可获取到包含boxShadow属性的JS对象。

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