scss在vue.cli中的安装,vue全局引入scss文件

　　本文主要介绍在Vue2.x中安装使用scss的相关信息，以及如何在Vue 2.x中全局引用公共SCSS文件，文中详细介绍了示例代码，有需要的朋友可以参考一下。

一、什么是SCSS

　　SCS是一个成熟、稳定、强大的CSS预处理器，SCSS是Sass3版本中引入的新语法特性。它完全兼容CSS3，继承了Sass强大的动态功能。

二、SCSS与CSS的区别

　　Scs代表时髦的CSS。与Sass不同，SCSS不基于缩进。的。Sass扩展被用作sass的原始语法，而SCSS通过。scss扩展。不像萨斯，SCSS像CSS一样有花括号和分号。与SCSS相反，萨斯很难读懂，因为它与CSS完全不同。这就是为什么SCSS是更推荐的Sass语法，因为它更容易阅读，并且非常类似于原生CSS，同时享受Sass的强大功能。SCSS更是优秀！

三、Vue中安装SCSS

　　建议在cmd窗口安装并使用管理员方式打开

安装SCSS

　　使用阿里云服务器下载依赖，在国内下载会比npm外网下载依赖快一些

　　cnpm i -D节点-sass sass-加载程序

　　//vue2.5.2需要降级安装。

　　cnpm i -D节点-sass@4.14.1 sass-loader@7.3.1

运行项目进行测试

　　输入以下命令运行项目

　　npm运行开发

　　运行成功~

四、项目中使用SCSS

　　在vue文件中将样式语言指定为scss。

　　vue代码

　　模板

　　div class=box-container1

　　El按钮类型=主要 @ click= m1 普通/el按钮

　　是/span

　　/div

　　/模板

　　到此完美使用SCSS~

补充：全局引用scss

　　首先安装此插件以全局引用scss。

　　npm安装sass-资源-加载程序-保存-开发

　　然后修改构建文件夹中的utils.js文件。

　　将

　　scss: generateLoaders(sass )，

　　代替

　　scss: generateLoaders(sass )。串联(

　　{

　　加载程序： sass-resources-loader ，

　　选项：{

　　resources:path . resolve(_ _ dirname，./src/assets/index.scss )//在此处更改为您自己的index . scss文件路径。

　　}

　　)

　　项目中的每个组件都可以直接使用base.scss文件中的变量和样式。记得在风格上加上郎=“SCSS”

　　样式范围的语言=scss

SCSS常用命令

　　SCSS官方文档

　　常用命令

　　混合样式：@mixin name(参数1，参数2…){…}取混合样式：@include name (@mixin name)继承样式：@extend Import scss样式：@import scss文件名条件控制指令：@if condition {…}

　　循环控制指令：@for $var从起始值到结束值-包含结束值@for $var从起始值到结束值-控制指令排除结束值循环列表项：@each $var in $List{}条件判断循环：@while

　　以及警告提示：@ warn "…" --

总结

　　以上就是本文关于安装和使用Vue2.x版SCSS的内容。有关安装和使用Vue 2.x版SCSS的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。