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

Question

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

看起来Nuxt在加载我的Sass vars之前正在加载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被启动之前设置vars？

-更新

按照@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

...but --在作用域中的变量看来，Bulma不能继承它们，因此忽略了我的vars (尽管加载了插件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 (我确实使用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分别是与node_modules中的主要Bulma文件和Buefy文件的相对路径。)

将其添加到nuxt.config.js > css中

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

也许有更好的方法(我已经看到通过Nuxt样式-资源模块，或者通过自定义插件--参见@kissu的回答)来执行此操作的参考信息，但是这至少是有效的。