将 Global SASS 变量导入 VUEPRESS 组件

Question

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

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

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

Answer 1

是的，you can do that.....

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

对 sass-loader v8+ 使用 prependData 或 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（fr示例）并重新启动沙箱，它也可以...

Answer 2

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

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

工作得很好！

我正在使用 .sass sintax 和 sass-loader - 7.3.1 ，所以这就是我使用 data 而不是 prependData 的原因。

Answer 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";
        `
    }
}

对我很有帮助

将 Global SASS 变量导入 VUEPRESS 组件

Import Global SASS variables into VUEPRESS components

sass

vue.js

vuepress

更新