如何在 vue js 组件中使用 scss 文件？答案

【问题标题】：How to use scss file in vue js component?如何在 vue js 组件中使用 scss 文件？
【发布时间】：2019-09-14 12:45:36
【问题描述】：

我有多个 scss 文件，这些文件都导入另一个 scss 文件名 style.scss。现在我需要将所有的 scss 编译成 css 并使用我所有的组件。怎么可能？

我已经关注了这个链接Followed Instruction

谁能帮帮我

【问题讨论】：

【解决方案1】：

您可以安装以下开发依赖项：

"devDependencies": {
   "node-sass": "^4.1.1",
   "sass-loader": "^3.2.3",
   "style-loader": "^0.13.1"
}

然后在你的 App.vue 中导入你的 scss 文件：

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

【讨论】：

是否将scss复制到css文件？ @西蒙
@ShuvroAkash 是的，它应该导入。您可以在执行vue-cli-service build 后检查您的构建文件。您还可以按照此处的建议实现 scss 加载器：medium.com/@mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9
webpack 配置设置可以在这里找到：gist.githubusercontent.com/mahesh-k-s/…
实际上我需要编译 scss 文件并存储在 index.html 中执行的 css 文件中。这样做有用吗？
我的项目有 vue.config.js。没有 webpack 文件。那我应该在哪里添加这些设置？