网站开发适合什么工作,wordpress 图片 筛选 插件,网站打开速度概念,建设一个网站多少钱呢在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS#xff0c;这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)#xff0c;否则无法在项目中直接使用。
方案一…在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)否则无法在项目中直接使用。
方案一在组件中直接使用
在组件中直接使用 SCSS/SASS 是最简单的方式
style langscss scoped/style通过 lang 选项可以选择使用的语法 scss/sass。如果希望样式能够在全局范围内生效就将 scoped 删除。
方案二在组件中导入 .scss 文件
有时候我们可能想定义一个通用的 scss/sass 我们可以在项目目录中创建一个 .scss 文件比如一些只想在特定组件中使用的通用样式或是一些 scss 变量等。
我们可以在组件中使用 import 进行样式导入例如
import ../src/static/common.scss;注意路径不要写错了。而且这种方案的前提是在导入组件中使用了 方案一 。否则的话 .scss 不可能直接在普通 css 样式表中进行编译需要保持样式表格式的统一。
方案三使用全局 scss/sass 文件
如果你希望定义一下全局能够使用的 scss 样式首先需要创建一个 .scss 文件然后在项目的 main.js 中使用 import 命令就像导入模块一样将独立 .scss 文件全局导入项目。
import ./static/common.scss;写在最后写博客不易如果这篇博客对你有用请留下你的赞吧。你的赞赏是我最大的动力。
