vue2.0中使用sass

Posted 西门吹牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

以上是关于vue2.0中使用sass的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 项目 使用sass

vue2.0配置sass

vue2.0添加sass

vue2.0以上版本安装sass(scss)

vue2.0 vue-cli+webpack使用less和sass的说明

vue2.0的变化