Vue2.x安装并使用SCSS的全部过程

目录
  • 一、什么是SCSS
  • 二、SCSS与CSS的区别
  • 三、Vue中安装SCSS
    • ️安装SCSS
    • ️运行项目进行测试
  • 四、项目中使用SCSS
  • 补充：全局引用scss
  • SCSS常用命令
  • 总结

一、什么是SCSS

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

二、SCSS与CSS的区别

  • SCSS代表Sassy CSS。与Sass不同，SCSS并非基于缩进。
  • .sass扩展名用作Sass的原始语法，而SCSS通过.scss扩展名提供更新的语法。
  • 与Sass不同，SCSS与CSS一样具有花括号和分号。
  • 与SCSS相反，Sass很难阅读，因为它与CSS截然不同。这就是为什么SCSS成为更推荐的Sass语法的原因，因为它更易于阅读，并且与Native CSS非常相似，同时又享受了Sass的强大功能。

SCSS更加优秀！

三、Vue中安装SCSS

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

️安装SCSS

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

cnpm i -D node-sass sass-loader

//vue2.5.2需要降级安装
cnpm i -D node-sass@4.14.1 sass-loader@7.3.1

️运行项目进行测试

输入以下命令运行项目

npm run dev

运行成功~

四、项目中使用SCSS

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

vue代码

<template>
  <div class="box-container1">
      <el-button type="primary" @click="m1">普通</el-button>
      <span class="span1">Yes</span>
  </div>
</template>

到此完美使用SCSS~

补充：全局引用scss

先安装这个插件来进行全局引用scss

npm install sass-resources-loader --save-dev

然后修改build文件夹中的utils.js文件

将

 scss: generateLoaders('sass'),

改为

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/index.scss')//这里改为自己的index.scss文件路径
    }
  }
)

项目里每个组件都可以直接用base.scss文件内的变量及样式了。记得style内加上lang=“scss”

<style scoped lang="scss">

SCSS常用命令

SCSS官方文档

常用命令

  • 混合样式：@mixin 名字(参数1，参数2…){…}
  • 取用混合样式：@include 名字（@mixin的名字）
  • 继承样式：@extend 需要继承的类、ID名、自定义的混合样式等的名字
  • 导入scss样式：@import "scss文件名"
  • 条件控制指令：@if 条件{…}
    循环控制指令：
  • @for $var from <开始值> through <结束值> -----------包括结束值
  • @for $var from <开始值> to <结束值> ------------不包括结束值
  • 循环List项目的控制指令：@each $var in $List{}
  • 条件判断循环：@while 条件{…}
  • 用户自定义的函数：@function 名称(参数1，参数2…){…}
    警告和错误的提示：
  • @warn “…”------------------------在终端输出警告
  • @error “…”----------------在.css文件和终端输出错误

总结

到此这篇关于Vue2.x安装并使用SCSS的文章就介绍到这了,更多相关Vue2.x安装使用SCSS内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue2 添加对scss的支持

    引入loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev scss支持 为了使用scss,我们需要先安装相关的node包: npm install --save style-loader sass-loader node-sass file-loader 安装好之后,为了可以在.vue和.scss中使用,需要在webpack

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色.主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择. 一.使用vue-cli(即vue-cli2)脚手架时 1. 首先,需要安装一个loader,sass-resources-loade

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

  • vue2配置scss的方法步骤

    1.安装文件 npm install --save-dev sass-loader npm install --save-dev node-sass 2.配置 webpack.base.conf.js 找到webpack.base.conf.js文件的module模块下面的rules添加以下代码 ... { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ... 注意:这里loaders

  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t

  • Vue2.x安装并使用SCSS的全部过程

    Vue2.x安装并使用SCSS的全部过程

    目录 一.什么是SCSS 二.SCSS与CSS的区别 三.Vue中安装SCSS ️安装SCSS ️运行项目进行测试 四.项目中使用SCSS 补充:全局引用scss SCSS常用命令 总结 一.什么是SCSS SCSS是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 二.SCSS与CSS的区别 SCSS代表Sassy CSS.与Sass不同,SCSS并非基于缩进. .sass扩展名用作Sass的原始语法,而SC

  • vue2.0安装style/css loader的方法

    项目需要引用额外的ui组件库,就需要安装style-loader和css-loader 安装style-loader  (css-loader默认有) npm install style-loader -D 然后,打开模板build--webpack.base.conf.js( 根据初始化模板不同也可能是 build 下面的webpack.base.conf.js ),新增一个json,注意style!css顺序不能颠倒(!表示连接) 补充: 2.0 以后应该写成 style-loader!cs

  • Redis自动化安装及集群实现搭建过程

    Redis自动化安装及集群实现搭建过程

    Redis实例安装 安装说明:自动解压缩安装包,按照指定路径编译安装,复制配置文件模板到Redis实例路的数据径下,根据端口号修改 配置文件模板 配置文件,当前shell脚本,安装包 参数1:basedir,redis安装包路径 参数2:安装实例路径 参数3:安装包名称 参数4:安装实例的端口号 #!/bin/bash set -e if [ $# -lt 4 ]; then echo "$(basename $0): Missing script argument" echo &qu

  • 使用CentOS 7.5卸载自带jdk安装自己的JDK1.8的过程

    本文主要介绍的是如何是Linux环境下安装JDK的,因为Linux环境下,很多时候也离不开Java的,下面笔者就和大家一起分享如何jdk1.8的过程吧. 一.安装环境 •本机系统:Win 10 •虚拟机软件:VMware PRO 14 •虚拟机Linux系统:CentOS 7.5 •JDK版本:1.8.0_191 •工具:SecureCRT •说明:本文是通过SecureCRT工具远程连接Linux操作,如果是直接在Linux可视化界面操作那就更方便了,原理一样. 二.安装步骤 •下载安装包  

  • CentOS8下安装oracle客户端完整(填坑)过程分享(推荐)

    oracle32位客户端安装 首先uname -a Linux localhost.localdomain 4.18.0-80.el8.x86_64 #1 SMP Tue Jun 4 09:19:46 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux cat /etc/redhat-release CentOS Linux release 8.0.1905 (Core) 可以看到我的电脑是64位,系统版本是CentOS8,然而服务器oracle数据库是32位的,所以

  • WIN10下的JDK安装与配置环境变量的过程(详细版)

    若学习JAVA,必须安装JDK(java development kit java开发工具包),并进行环境变量的配置后方可进行java的学习.经过几次配置环境变量失败后,我最终成功.通过对遇到的问题进行总结,形成这篇博文.欢迎交流.[当然,小白如我.]常见失败原因如下: 安装问题:将jdk与jre装在同一文件夹下,导致"jdk中的原文件"被覆盖.(出现javac指令错误.) 变量混淆:打开环境变量设置框后,有"用户变量"与"系统变量"两类,我们需

  • pytorch安装及环境配置的完整过程

    pytorch安装及环境配置的完整过程

    虚拟环境的创建 命令行窗口中使用 conda create -n 环境名 python=所需python版本 即可创建虚拟环境 pytorch的gpu版本安装 首先确定自己电脑的gpu版本 打开显卡控制面板 点击系统信息,选择组件 产品名称中CUDA后的11.0便是gpu版本 再在pytorch官网选择对应版本 进入为pytorch创建的虚拟环境,输入命令,等待片刻,pytorch便安装完成了. 再在NVIDIA官网安装cuda和cudnn 将cudnn的三个文件分别放入cuda安装目录下,即可

  • Windows安装Anaconda3的方法及使用过程详解

    Windows安装Anaconda3的方法及使用过程详解

    一.环境 windows 二.下载 进入Anaconda 官网进行下载 安装 找到安装包所在的目录,双击安装包 点击 Next 点击 I Agree 根据个人需要选择 Just Me 或者 All Users,然后点击 Next 选择安装路径,然后点击 Next 点击 Install 等待安装完成,点击 Next 点击 Next​​​​​​​ 点击 Finish 安装完成 三.创建 Python 虚拟环境 conda create -n your_env_name python=X.X    #

  • centos8安装nginx1.9.1的详细过程

    centos8安装nginx1.9.1的详细过程

    1.17.9 更香,真的 nginx下载地址:https://nginx.org/download/ 1.下载nginx wget https://nginx.org/download/nginx-1.9.9.tar.gz 2.解压nginx tar -zxvf nginx-1.9.9.tar.gz 3.安装依赖包 yum -y install gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel 4.配置nginx

随机推荐