资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

在vue-cliv3.0中使用SCSS/SASS的方法

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

创新互联主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设公司、程序开发、网站优化、微网站、小程序开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都网站制作、成都网站建设、外贸营销网站建设、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。

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

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

通过 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-cliv3.0中使用SCSS/SASS的方法
当前地址:http://www.cdkjz.cn/article/gdhhjs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220