如何在 vue-cli v3.0 中使用 SCSS/SASS

在项目中使用 SCSS/SASS 进行样式编写无疑会节省不少开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS，这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)，不然没法在项目中直接使用。javascript

方案一：在组件中直接使用

在组件中直接使用 SCSS/SASS 是最简单的方式：css

<style lang="scss" scoped> </style>
复制代码

经过 lang 选项能够选择使用的语法： scss/sass。若是但愿样式可以在全局范围内生效，就将 scoped 删除。html

方案二：在组件中导入 .scss 文件

有时候咱们可能想定义一个通用的 scss/sass 咱们能够在项目目录中建立一个 .scss 文件，好比一些只想在特定组件中使用的通用样式或是一些 scss 变量等。vue

咱们能够在组件中使用 @import 进行样式导入，例如：java

@import '../src/static/common.scss';
复制代码

注意路径不要写错了。并且这种方案的前提是在导入组件中使用了 方案一 。不然的话 .scss 不可能直接在普通 css 样式表中进行编译，须要保持样式表格式的统一。vue-cli

方案三：使用全局 scss/sass 文件

若是你但愿定义一下全局可以使用的 scss 样式，首先须要建立一个 .scss 文件，而后在项目的 main.js 中使用 import 命令就像导入模块同样，将独立 .scss 文件全局导入项目。sass

import "./static/common.scss";
复制代码

写在最后，写博客不易，若是这篇博客对你有用，请留下你的赞吧。你的赞扬是我最大的动力。spa