vue2/vue3 JS和CSS相互引用（兼容SCSS）

vue2

1. css引用js

首先在标签中用v-bind动态绑定style，传入data中的数据testData

<span  :style="{'--text': testData }"></span>

也可以循环

<span v-for="item in testDataList" :style="{'--text': item.text, '--color': item.color}"></span>

然后在样式中接收就可以了，这种接收方式在scss里也可以用：

span {
    content: var(--text);
    background-color: var(--color);
}

如果接收的data内容需要条件判断或其他处理后传入，可以用computed，数据变化时可实时更新

2、js引用css

首先 在scss中配置要导出的变量

// 定义变量
$testColor:#304156;
// 暴露出去
:export {
  testColor: $testColor;
  }

然后 在script中导入变量并使用，也可以在data中定义

<script>
import variables from '@/styles/variables.scss'
export default {
  computed: {
    variables() {
      return variables
    }
  }
}
</script>

• 引入的变量定义后可以在template中正常使用

• 如果要在scss中使用暴露的变量可以用其@import方法再引入

@import "~@/styles/variables.scss";

• :export的是一个 全局变量，注意尽量引用，不要改变，如果改变了，所有import这个变量的值都变化了；
• js引用和css引用可以互不影响

vue3

1. css引用js

vue3中不需要在标签中用v-bind绑定样式，直接在style里接收就可以

<style scoped vars="{ testData }">
span{
  color: var(--testData);
}
</style>

如果需要给变量加global或者scoped，则写成var(--global:xxx)，scss写成 var(#{"--global:xxx"})

2、js引用css

与vue2相同

个人笔记，欢迎交流指正，鞠躬