如何在Vue文件中调用Sass变量并实现值变更自动同步？

直接在Vue模板的内联style里写$contrast肯定不行，因为内联style是浏览器直接解析的纯CSS代码，根本认不出SCSS的变量语法，编译过程也不会处理这部分内容。给你两个靠谱的解决办法：

• 方法一：用SCSS类替代内联样式
  在Vue组件的<style scoped>（或者全局样式文件）里导入variables.scss，然后定义一个可复用的类：

  @import '@/path/to/variables.scss'; // 替换成你项目里实际的文件路径
  .bg-contrast {
    background-color: $contrast;
  }
  

  接着在模板里把内联style换成类名：

  <div class="bg-contrast"></div>
  

  这样SCSS编译时会自动把变量替换成对应颜色值，后续修改$contrast的话，所有用这个类的元素样式都会同步更新。

• 方法二：把SCSS变量转成CSS自定义属性
  先在variables.scss里把SCSS变量映射成全局CSS变量：

  $contrast: #edebe4;
  :root {
    --contrast: #{$contrast}; // 用SCSS插值把变量值注入到CSS变量里
  }
  

  然后在Vue模板的内联style里用CSS变量的语法：

  <div style="background-color: var(--contrast)"></div>
  

  这种方式既保留了内联样式的灵活性，又能借助CSS变量实现样式的自动同步——只要$contrast的值变了，编译后的CSS变量也会跟着更新，浏览器会自动应用新的颜色。

注意：不管用哪种方法，都要确保Vue组件的<style>部分能正确导入variables.scss，不然还是识别不到SCSS变量。

内容的提问来源于stack exchange，提问作者knot22