将全局 SASS 变量导入 VUEPRESS 组件答案

【问题标题】：Import Global SASS variables into VUEPRESS components将全局 SASS 变量导入 VUEPRESS 组件
【发布时间】：2025-11-29 18:05:01
【问题描述】：

在 Vuepress 中，有没有办法用我的变量全局导入 .sass 文件，这样我每次使用变量时都不需要导入它？

也许就像我们在 VUE 中所做的那样：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/sass/_variables.sass";
          @import "@/sass/_mixins.sass";
        `
      }
    }
  }
};

【问题讨论】：

标签： vue.js sass vuepress

【解决方案1】：

是的，you can do that....

// .vuepress/config.js
module.exports = {
  sass: {
    prependData: `
        @import "@/sass/_variables.sass";
        @import "@/sass/_mixins.sass";
      `
  }
};

prependData 用于 sass-loader v8+ 或 data，如果您使用的是旧版 sass-loader

更新

自己试过了。我遇到了 @ 别名无法解析的问题，因此创建了我自己的别名 - 在本例中为 .vuepress/styles 目录

// .vuepress/config.js
const path = require("path");

module.exports = {
  sass: {
    prependData: `
        @import "@styles/_variables.sass";
      `
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@styles": path.resolve(__dirname, "./styles")
      }
    }
  }
};

检查this sandbox ....启动后，导航到指南

如果您将prependData 更改为data，将sass-loader 版本更改为7.3.1（例如）并重新启动沙箱，它也可以工作...

【讨论】：

谢谢@michal-levý 但它没有用。由于另一个错误，我正在使用更旧的sass-loader 版本。我仍然必须在每个组件中导入 sass 文件才能访问变量。如果您有其他想法，我将不胜感激。谢谢！
非常感谢@michal-levý。事实上，您的解决方案为别名“问题”提供了一些启示。我意识到我可以使用@theme 别名，所以我做到了并且工作得很好！感谢您抽出宝贵时间帮助我，并为我指明正确的方向！如果您不介意，我将发布对我有用的答案。

【解决方案2】：

正如@michal-levý 所指出的使用别名，我刚刚发现我可以使用 vuepress 内置别名 @theme。所以我的config.js 是这样的。

module.exports = {
  sass: {
    data: '@import "@theme/styles/_variables"'
  }
}

工作得很好！

我使用.sass sintax 和sass-loader - 7.3.1 due another bug，所以我使用data 而不是prependData。

【讨论】：

【解决方案3】：

我想分享我的解决方案，也许它对某人有用。假设您的项目具有如下结构：

your-project/
├── .gitignore
├── package.json
├── package-lock.json
├── src/
└── docs/
    ├── .vuepress
    │   ├── components/*.vue
    │   ├── styles/main.scss
    │   ├── config.js
    │   └── enhanceApp.js
    └── README.md

将以下代码添加到config.js

// config.js

const path = require('path')

module.exports = {
    sassOptions: { indentedSyntax: true },
    alias: {
        'styles': path.resolve(__dirname, './styles')
    },
    scss: {
        additionalData: `
            @import "~styles/main.scss";
        `
    }
}

作为魅力为我工作

【讨论】：