如何解决当 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 举报,一经查实,本站将立刻删除。