为什么从另一个文件导入的 SCSS 变量在 Vue 3 中不起作用？

Question

我已经在我的 vue 3 项目中安装了 sass 加载程序，但问题是我想从另一个文件导入变量，但不起作用

我的架构是：

src
  assets
     scss
        styles.scss
        _variables.scss

styles.scss

@import url('./_variables.scss');

body{
  font-family: 'Montserrat';
  background-color: $primary-black;
}

.sidebar{
   width: 250px;
   height: 100vh;
   max-height: 100vh;
   background-color: $primary-black;
}

_variables.scss

$primary-black: #222222;

App.vue

Some HTML

<script>
  import Sidebar from './components/Sidebar';

  export default {
   components: { Sidebar },
   setup() {

  },
}
</script>

<style lang="scss" scope>
   @import url('./assets/scss/styles.scss');
</style>

问题是在浏览器中 $primary-black 变量失败，它显示为 background-color: $primary-black 从字面上看，我的意思是不采用 de "#222222" 颜色，但是如果我更改变量，并将其放入 styles.scss 文件中，它可以工作，所以我不确定可能是什么问题

Answer 1

导入时不要使用url功能，试试下面的方法

<style lang="scss" scope>
   @import './assets/scss/styles.scss'
</style>

为什么从另一个文件导入的 SCSS 变量在 Vue 3 中不起作用？

Why do SCSS variables imported from another file doesn't work in Vue 3?

sass

vue.js

vuejs3