如何在最新的 vue-cli 启动项目中使用 SASS / SCSS？

Question

我需要在我的项目中使用 SASS 或 SCSS。

我使用 vue-cli 制作了最新版本的入门项目。

有人在使用 webpack 的最新入门项目中使 sass/scss 工作成功吗？

原文由 CommonSenseCode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1. 您安装必要的依赖项

npm install -D node-sass sass-loader

1. 对于全局样式，只需将文件导入 main.js ：

import './styles/my-styles.scss'

1. 在 .vue 文件中，将 lang 添加到 <style> 元素。

<style lang="scss">

如果使用网络风暴：

<style lang="scss" rel="stylesheet/scss">

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

作为 @vue/cli-service": "^3.9.0" 的最新文档，首先需要安装两个 npm dev 依赖，即 sass、sass-loader

萨斯

npm install -D sass-loader sass

yarn add --dev sass-loader sass

然后你可以导入相应的文件类型，或者在 *.vue 文件中使用它们：

 <style lang="scss">
  $color: red;
</style>

请参阅 此处的最新文档

原文由 Prafull Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议