如何通过 Nuxt/Buefy 自定义 Bulma 变量？

Question

使用 Nuxt 和 Buefy 时如何自定义 Bulma 变量？

似乎 Nuxt 在加载我的 Sass 变量之前加载了 Bulma/Buefy，我在其中设置了我的自定义值。

nuxt.config.js：

export default {
  target: 'static',
  head: {},
  css: [
    '~/assets/bulma-vars.sass'
  ],
  plugins: [],
  components: true,
  buildModules: [
    '@nuxt/typescript-build',
  ],
  modules: [
    ['nuxt-buefy', {css: true}],
  ],
  build: {}
}

bulma-vars.sass：

$danger: orange

如何在 Bulma/Buefy 启动之前设置我的变量？

[--- 更新 ---]

按照@kissu 的想法，通过插件来实现这一点，我开始着手这项工作。

nuxt.config.js：

plugins: [
    '~/plugins/set-bulma-vars.js'
],

plugins/set-bulma-vars.js

@import '~/assets/set-bulma-vars.sass'

assets/set-bulma-vars.sass

$danger: #00f

...但是对于范围内的变量来说，Bulma 可以继承它们，因此我的变量被忽略（尽管插件 CSS 已加载。）

所以到目前为止，我解决这个问题的唯一方法是通过我自己的答案，如下所示。

Answer 1

最后，这就是我所做的。

首先，在 nuxt.config.js > modules 中禁用 Buefy 的自动加载：

modules: [
    ['nuxt-buefy', {css: false}],
]

这解决了在我们有机会设置任何主题变量之前加载 Buefy（和 Bulma）的问题。

接下来，创建一个 Sass 文件，例如bulma-vars.css:

$danger: orange
@import "~bulma/bulma"
@import "~buefy/src/scss/buefy"

（~bulma/bulma 和 ~buefy/src/scss/buefy 分别是 node_modules 中主 Bulma Sass 文件和 Buefy SCSS 文件的相对路径。）

将此添加到nuxt.config.js > css:

css: [
    '~/assets/bulma-vars.sass'
]

可能有更好的方法（我已经看到通过Nuxt style-resources module 或通过自定义插件执行此操作的参考 - 请参阅@kissu's answer）但这至少有效。

Answer 2

我创建了一个带有类似变量的/assets/scss/custom_buefy.scss 文件

@import "~bulma/sass/utilities/_all";
// the line above is important

$primary: hsl(168, 59%, 47%);
$link: hsl(24, 94%, 66%);
$info: hsl(200, 100%, 75%);
...

自定义我们的应用程序。

然后创建一个/plugins/vue-buefy.js 文件来导入它

import '~/assets/scss/custom_buefy.scss'

然后，将其导入到我们的nuxt.config.js 文件中

plugins: [
  { src: '@/plugins/vue-buefy', mode: 'client' },
],

到目前为止工作良好。也许不是最好的配置，但足够灵活，可以自定义 CSS 并按需导入一些特定组件（而不是整个库）。

---

我的出发点不是 CLI（我确实使用 buefy 包），所以是 YMMV。