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

Posted 2023-02-23

【中文标题】如何在 vue js 组件中使用 scss 文件？

【英文标题】：How to use scss file in vue js component?

【发布时间】：2019-09-14 12:45:36

【问题描述】：

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

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

谁能帮帮我

【问题讨论】：

看看这个，medium.com/@mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9

你注意到教程中 vue.config.js 中的patterns 字段了吗？

谢谢你们的回复:)。我已经按照这篇文章解决了这个问题flaviocopes.com/vue-using-scss

【参考方案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 文件。那我应该在哪里添加这些设置？