如何通过 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'
],

插件/set-bulma-vars.js

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

资产/set-bulma-vars.sass

$danger: #00f

...但对于 Bulma 可以继承它们的范围内的变量来说，它似乎并不存在，随后我的变量被忽略（尽管插件 CSS已加载。）

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

Answer 1

我用这样的变量创建了一个/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 tho（我确实使用了buefy包），所以 YMMV。

Answer 2

最后，这就是我所做的。

首先，在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是相对路径分别与主布尔玛萨斯文件和Buefy SCSS文件，内node_modules 。）

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

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

可能有更好的方法（我已经看到通过Nuxt 样式资源模块或通过自定义插件来执行此操作的参考 - 请参阅@kissu 的答案）但这至少有效。