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

Question

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

我的架构是：

src
  assets
     scss
        styles.scss
        _variables.scss

样式.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;
}

_变量.scss

$primary-black: #222222;

应用程序.vue

一些 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 变量失败，它出现背景颜色： $primary-black 字面意思，我的意思是不采用“#222222”颜色，但如果我更改变量，并将其放入 styles.scss 文件中，它可以工作，所以我不确定可能是什么问题

Answer 1

导入时不要使用 url 函数，请尝试以下方法

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