如何在 Vue 中使用外部作用域 scss

Posted 2023-02-22

【中文标题】如何在 Vue 中使用外部作用域 scss

【英文标题】：How to use external scoped scss in Vue

【发布时间】：2020-04-30 11:50:49

【问题描述】：

我正在 Vue-nuxt 上构建一个项目。我想使用仅限于该组件的外部 SCSS。

<template>
  <div class="card">
    <h3> heading </h3>
    <p> para </p>
  </div>
</template>

<script>
import './../assets/css/card.scss'

export default 
  props: 
    heading: String,
    para: String
  

</script>

我该怎么做？

【参考方案1】：

您可以在样式标签中导入您的 scss 文件并为其分配范围。如下：

<style lang="scss" scoped>
@import "sample.scss";
</style>

【讨论】：

不能导入内部样式标签？

当然可以。它是编写 scss 代码和导入 scss 文件的地方

@anny123 github.com/vuejs-templates/webpack/issues/… 看起来您可以在样式标签中导入。它不适合你吗？

@ShadiFarzankia 非常感谢您的回答。您最初的答案在导入前缺少@。我们需要写成@import还是import？

@anny123 是的。你需要使用@。我的错。对不起