如何解决无法访问Vue文件的脚本标签中的CSS变量
问题
我正在尝试从.vue
文件访问SCSS文件中定义的变量。该项目正在使用vue-cli。
根据Vue's docs:
但是,如果我创建一个名为variables.css
的变量variable
并尝试将其导入脚本中,则找不到此variable
。
styles / variables.module.css
$variable: 'foo';
:export {
variable: $variable
}
App.vue
<script>
import variables from "./styles/variables.module.scss";
export default {
name: "App",methods: {},computed: {
variable() {
console.log(variables); // Object {}
return variables.variable || "not found";
}
}
};
</script>
但是,在同一vue文件的<style module>
标记中导入variables.css文件确实可以。
App.vue
<style module lang="scss">
@import "./styles/variables.module.scss";
:export {
variable: $variable;
}
</style>
我要实现的目标
<p>Importing within <script>,the variable is {{variable}}</p>
// 'not found',should be "foo"
<p>Importing within <style>,the variable is {{$style.variable}}</p>
// correctly showing "foo"
尝试过:
- 将
.module
添加到SCSS文件名(按照vue's docs) - 使用
requireModuleExtension: false
创建vue.config.js文件 (来自同一文档)
可复制的演示
https://codesandbox.io/s/importing-css-to-js-o9p2b?file=/src/App.vue
解决方法
您需要将webpack
和CSS modular代码添加到webpack.config.js
中。
npm install -D vue-loader vue-template-compiler webpack
这是工作中的demo
注意:您的vue-template-compiler
和vue
应该是同一版本
可以使用SCSS
包导入.ts
文件,从.sccs
文件生成scss-to-json
的变量。 codeandbox lambda layer。
我使用demo中所述的以下步骤。
-
安装
npm i --save-dev scss-to-json
。 -
将此内容放入您的
package.json
:
"scripts": {
...
"scss2json": "echo \"export const SCSS_VARS = \" > src/styles/scss-variables.generated.ts && scss-to-json src/styles/variables.module.scss >> src/styles/scss-variables.generated.ts"
},
并使用npm run scss2json
运行它。 Windows用户将需要调整示例。
- 访问变量:
import {SCSS_VARS} from './styles/scss-variables.generated.ts';
...
console.log(SCSS_VARS["$variable"]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。