0

我在 JSON 文件中有一组变量，我试图在样式（SCSS）和我的 Vue 3（使用 Vue CLI）环境之间共享。

./vars.json

{
  "foo": 123,
  "bar": "abc"
}

让 JSON 进入脚本方面的意识是很容易的部分。我对如何将变量放入 SCSS 感到困惑。根据我可以在网上找到的参考资料（其中包括Vue CLI Docs），我最好的办法是通过.prependDatasassvue.config.js

vue.config.js

const varData = require( "./vars.json" );

function jsonVarHelper() {
  let string = "";
  for (var variableName in varData) {
    string += `$${variableName}: ${varData[variableName]};\n`;
  }
  return string;
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/main.scss";\n${jsonVarHelper()}`
      }
    }
  }
};

......这是渲染"$foo: 123;\n' + '$bar: abc;\n'"- 我通过吐出 a console.log( {string} )in来确认这一点jsonVarHelper。进一步证实，我可以使用 Vue 组件<style>部分中的变量。

./src/App.vue（省略<template>并<script>为简洁起见）

<style lang="scss">
#app::after {
  content: "#{ $bar }"; // appends "abc" as expected
}
</style>

果然，#app在编译页面中附加了字符串“abc”。太好了，对吧？问题解决了……</p>

但是，当我尝试引用*.scss文件中的变量时，WebPack 会引发语法错误。

./src/styles/main.scss

#baz::after {
  content: "#{ $bar }"; // throws `Syntax Error: SassError: Undefined variable: "$bar".`
}

我猜这是什么时候从配置scss-loader中添加数据的问题。prependData是否可以在尝试编译本机文件之前解析/注入该字符串？*.scss

4

0 回答 0