vue2.0中使用sass

第一部分:Sass语言

Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS语法。Sass有助于保持大型样式表结构良好。

Sass有两种语法。

一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾。在vue中,我们可以使用<style lang="scss"></style>来标志里面的内容是以SCSS语法来书写的。

一种称为SASS,是Sass以前的语法,它和python一样,没有{}大括号来标志程序块,而是以缩进来标志嵌套层级;而且也不使用分号,而是用换行符来分隔属性。SASS样式表文件要以.sass扩展名结尾。在vue中,我们可以使用<style lang="sass"></style>来标志里面的内容是以SASS语法来书写的。

第二部分、VUE2.0中集成Sass

Step1:在项目中安装Sass

1 npm install node-sass --save-dev
2 npm install sass-loader --save-dev

PS:有时因为网络原因,安装起来比较慢,这里推荐的和大家的一样,使用淘宝的,可以临时用一下淘宝的镜像,不用非得将默认的镜像源更新为淘宝的。如下所示:

1 $ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

说明:

--registry=https://registry.npm.taobao.org 淘宝npm包镜像

--disturl=https://npm.taobao.org/dist 淘宝node源码镜像,一些二进制包编译时用

--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 这个才是node-sass镜像

Step2:配置Sass解析器

      webpack.base.conf.js中,modules结节下的loaders结节中添加es2015的支持,如下所示:

 1 module: {
 2     loaders: [
 3             {
 4                 test: /\.js$/,
 5                 exclude: /(node_modules|bower_components)/,
 6                 loader: ‘babel‘,
 7                 query: {
 8                     presets: [‘es2015‘]
 9                 }
10             }
11         ],
12 }

PS:不安装的话会出现如下错误:Couldn‘t find preset "es2015" relative to directory

      同样是在webpack.base.conf.js中,modules结节下的rules节点中添加sass的解析器,如下所示:

1 module: {
2     rules: [
3        {
4         test: /\.scss$/,
5         loaders: ["style", "css", "sass"]
6       },

Step3:尝试使用Sass的SASS语法

     以下是使用传统的CSS样式的页面:

样式如下:

1 <style>
2   .body {
3     color:red;
4   }
5 </style>

我们修改样式为:

1 <style lang="sass">
2   $body-color: red;
3
4   .body
5       color: $body-color;
6 </style>

       样式依然生效。

Step4:尝试使用Sass的SCSS语法

1 <style lang="scss">
2   $body-color:red;
3   .body {
4     color: $body-color;
5   }
6 </style>

样式依然生效。

说明:这个只是最简单的例子,而且是与vue结合,如果你需要单独编译.sass文件或者.scss文件,那么你需要安装Ruby, 同时可以让SASS监控某个样式表的变动,实现样式的热部署。

参考文档

http://www.ruanyifeng.com/blog/2012/06/sass.html

https://www.w3cplus.com/sassguide/

http://www.jianshu.com/p/67f52071657d

https://www.cnblogs.com/walls/p/6258974.html

http://www.jianshu.com/p/8e60048baeb7

https://www.cnblogs.com/qqqiangqiang/p/5359986.html

http://sass.bootcss.com/

https://www.cnblogs.com/crazycode2/p/6535105.html

https://zhuanlan.zhihu.com/p/25106145

时间: 2024-11-04 17:19:19

vue2.0中使用sass的相关文章

vue2.0 中#$emit,$on的使用详解

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以由vm.$emit触发.回调函数会接收所有传入事件触发函数的额外参数. 1 vm.$emit( event, [-args] ) 触发当前实例上的事件.附加参数都会传给监听器回调. 例子: 1 //父组件 2 <template> 3 <ratingselect @select-type=&

vue2.0中使用mint ui做底部选项卡切换

首先在vue2.0中webpack中下载 mint ui 然后再main.js引入 这样就可以使用mint ui里面的布局组件了html部分(就是你要使用底部选项卡的部分) <!--底部选项卡--><mt-tab-container v-model="selected"> <mt-tab-container-item id="one"> one </mt-tab-container-item> <mt-tab-c

vue2.0中router-link详解

vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已经被<router-link>组件替代了 <router-link>组件支持用户在具有路由功能的应用中点击导航.通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css

在vue2.0中没有dev-server.js下配置方法&lt;转&gt;

这篇文章主要介绍了vue2.0在没有dev-server.js下的本地数据配置方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 问题描述: 在vue2.0的以上的版本,vue-cli的build的文件夹下没有dev-server.js文件,那怎么配置mock数据 Vue2.x在build下的webpack.dev.conf.js配置就行 //在const portfinder = require(‘portfinder')后添加 const express = require('

vue2.0中的watch和计算属性computed

watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></

vue2.0中v-on绑定自定义事件的理解

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码: 1 <div id="counter-event-example"> 2 <p>{{ total }}</p>

vue2.0 项目 使用sass

1.安装依赖: cnpm i --save-dev node-sass sass-loader 2.webpack.base.config.js添加以下内容: ... { test: /\.scss$/, loaders:['style','css','sass'] }, ... 3.在vue文件的style标签使用scss: <style lang="scss" scoped="" type="text/css"></styl

vue2.0中实现单选,全选,购物车加减计算等效果

<!doctype html><html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> &l

Vue2.0中的Ajax请求

Vue可以借助于vue-resource来实现Ajax请求 http请求报文 浏览器与服务器数据交互是遵循http协议的,当浏览器要访问服务器的时候,浏览器需要将相关请求数据提交给服务器. 格式分为:请求报文行.请求报文头.请求空行.请求报文体 http响应报文 当浏览器请求服务器的时候,服务器需要将数据返回给浏览器,这种数据是通过响应报文响应会回浏览器的. 格式分为:响应报文行.响应报文头.响应空行.响应报文体 HTTP协议约定 1.浏览器祥服务器发出请求的时候有get请求和post请求,浏览