如何正确将 scss 文件导入 VueJS 项目答案

【问题标题】：How to correctly import scss files into VueJS project如何正确将 scss 文件导入 VueJS 项目
【发布时间】：2021-11-06 20:50:04
【问题描述】：

我有组件 - Header.vue

标题：

<template>
  <div>
    <div class="header">

    </div>
  </div>
</template>

<script>
export default {
  name: "Header"
}
</script>

<style lang="scss">
@import "src/assets/styles/header";
</style>

如您所见，我正在尝试导入名为 header 的 scss 文件，但它不起作用。在互联网上我发现，我必须安装sass、node-sass 和sass-loader，但它对我不起作用。我仍然得到错误。问题是什么？带文件名？还是应该将此文件导入其他地方？

P.S：这里是packege.json，如果它很重要的话：

{
  "name": "asd",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "node-sass": "^6.0.1",
    "sass-loader": "^12.1.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

【问题讨论】：

标签： javascript vue.js sass

【解决方案1】：

试试这样：

@import "@/assets/styles/header.scss";

【讨论】：

啊，试试@insted .
而且它也不起作用Cannot resolve file
您的文件是assets/styles/header.css 或header.scss?
是的，assets/styles/header.scss
然后尝试把css改成scss，我更新了答案

【解决方案2】：

导入'@/src/assets/styles/header.scss'；

【讨论】：

这不起作用，它只是用红色和Cannot resolve突出显示整行
请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。