NuxtJS 如何将颜色从商店 json 转移到 css 变量？

Question

我正在从 vuex 商店的后端获取颜色，我需要将该颜色设置为 css 变量。并且此变量需要在每个页面上都可用。我该怎么做？

Answer 1

假设你在 Vuex (ref) 中加载 nuxtServerInit 动作的颜色设置，格式为：

{
  primary: '#F00',
  secondary: '#000'
}

按布局

您可以将这些变量绑定为内联样式 (ref) to the root element of your layout (ref)，例如 layouts/default.vue:

<template>
  <div :style="styles">
    <nuxt />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'colorsFromBackend'
    ]),
    styles () {
      const obj = {}
      for (const key in this.colorsFromBackend) {
        obj[`--${key}`] = this.colorsFromBackend[key]
      }
      return obj
    }
  }
}
</script>

然后就可以使用布局下的变量了：

<template>
  <div class="demo">CSS Variable Testing</div>
</template>

<style scoped>
.demo {
  color: var(--primary);
  background: var(--secondary);
}
</style>

这是一个现场演示：https://codesandbox.io/s/css-variable-with-nuxt-js-7lp9t4

通过插件

或者，如果您想全局使用变量，可以通过 Nuxt 插件 (ref), the plugin will be executed in client only before rendering Vue components (ref).

向 <head> 插入一个样式标签来完成此操作

首先在nuxt.config.js中添加插件配置：

export default {
  // ...
  plugins: [
    {
      src: '~/plugins/css-var.js',
      mode: 'client' // Important for running in client side only
    }
  ]
}

然后，在plugins/目录下添加插件文件css-var.js：

export default ({ app, store }) => {
  // Fetch the color object from Vuex
  const colorsFromBackend = store.state.colorsFromBackend
  // Set the css content
  let styleContent = ''
  for (const key in colorsFromBackend) {
    styleContent += `--${key}: ${colorsFromBackend[key]};`
  }

  // Create a style tag
  const style = document.createElement('style')
  style.id = 'css-var'
  style.innerText = `:root{${styleContent}}`
  // Append the tag to the end of `head`
  document.head.appendChild(style)
}

使用这种方法，css 变量将在指向 <html> (ref) 的 :root 中声明，因此您可以访问 css应用程序中随处可见的变量。

现场演示：https://codesandbox.io/s/css-variable-with-nuxt-js-plugin-enjkri

NuxtJS 如何将颜色从商店 json 转移到 css 变量？

NuxtJS how to transfer colors from store json to css vars?

vue.js

nuxt.js

按布局

通过插件