当 Vue CLI 的 WebPack CSS/SCSS 加载器处理通过 `prependData` 传递的数据时，如何修改？

问题描述

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

./vars.json

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

让 JSON 进入脚本端的意识是很容易的部分。我对如何将变量放入 SCSS 感到困惑。根据我可以在网上找到的参考资料（Vue CLI Docs，其中包括），我最好的办法是通过 prependData 中的 sass（加载程序）配置中的 vue.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'"——我通过在console.log( {string} )中吐出一个jsonVarHelper来证实这一点。进一步证实了我可以使用 Vue 组件的 <style> 部分中的变量。

./src/App.vue（为了简洁省略了 <template> 和 <script>）

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

果然，#app 在编译页面中附加了字符串“abc”。很棒，对吧？问题解决了……

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

./src/styles/main.scss

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

我猜这是何时 scss-loader 将来自 prependData 配置的数据放在前面的问题。是否可以让它在尝试编译本机 *.scss 文件之前解析/注入该字符串？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）