在scss和vue中使用相同的变量？

Question

在 scss 和 vue 中使用相同的变量？

我需要从数据中计算出数字，并且它们需要是相同的值。如何在 sass 文件中使用 vue 中的相同变量？

并且使用这个值进行一些计算。

在codepen查看源文件

(https://codepen.io/EricBugfree/pen/mXEpey)

。

Answer 1

你真的无法让两者进行通信，因为 sass 编译为简单的 css 并删除了所有变量。不过，我能想到有两种可行的选择。首先你可以将 sass 变量定义为 :root css 变量

:root{ --circleQuantity:#{$circleQuantity}}

然后使用 javascript 访问该变量，以使用如下方式在 vue 中设置该变量：

const root = document.querySelector(':root')

function getStyle(name){
    let select = getComputedStyle(root)
    return select.getPropertyValue(name)
}

这将允许您仅在 sass 环境中设置所需的变量，但它也会留下自身的残余物，并且您可能会遇到加载顺序问题以及其他问题，例如需要从中删除单位值（如 px）以便正确使用它们。

解决此问题的另一种方法是在外部文件（例如 var.json/env.json 文件）中定义变量，然后将该文件导入到 .vue 文件和 sass 文件中。虽然这在像 vue 这样的 javascript 框架中非常简单，但 sass 本身并不支持此功能。然而，我用过一个叫做“node-sass-json-importer”的东西可以做到这一点。

使用您的包管理器（npm/yarn/etc）安装它（或将其添加到您的 package.json 文件），然后将导入器包含在您的特定 webpack .config 文件中。供参考的是我在项目中使用此确切方法的 vite.config 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import jsonImporter from "node-sass-json-importer"

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        importer: jsonImporter(),
      }
    }
  },
  plugins: [vue()],
  server:{
    host: false,
    port: 8000,
    watch: {
      usePolling: true
    }
  }
})