在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018-06-14 17:29
856 查看
在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器),否则无法在项目中直接使用。
方案一:在组件中直接使用
在组件中直接使用 SCSS/SASS 是最简单的方式:
<style lang="scss" 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";
总结
以上所述是小编给大家介绍的在 vue-cli v3.0 中使用 SCSS/SASS的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 在vue中使用sass的配置的方法
- 在vue项目中使用sass的配置方法
- 在vue中使用sass的配置的方法
- 在vue中使用sass的配置的方法
- vue中使用scss, 小记~安装sass-loader
- 在vue项目中使用Sass/Scss(视窗环境)
- 使用Vue.js加sass时遇到 Invalid CSS after ".xxx{": expected "}", was "{" 错误的解决方法
- vue安装和使用scss及sass与scss的区别详解
- Sass结合Modernizr的使用方法
- nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法
- windows环境下强制JVM和Sass使用utf-8编译的方法
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- vue插件使用方法
- SASS/SCSS 使用指南
- vue-router:嵌套路由的使用方法
- Vue.js路由组件vue-router使用方法详解
- 详解vue 中使用 AJAX获取数据的方法
- Vue使用v-for报Duplicate value found in v-for="...": "". Use track-by="$index" 错误解决方法
- SASS\SCSS 避免运算的方法
- 使用vue时Module build failed: TypeError: this._init is not a function错误的解决方法