1.安装。

　　安装ruby ：http://rubyinstaller.org/downloads

　　

　　

　　创建项目：在f盘创建一个名为sass的文件夹

　　ruby命令行：f:

　　ruby命令行：cd sass

　　ruby命令行：gem install sass

　　ruby命令行：gem update sass   更新

　　ruby命令行：gem uninstall sass 卸载

　　ruby命令行：sass -v 版本检查

　2.ruby编译初尝试：

　　

　　test.scss

　　

$body-color:#FF6000;

body{

    background-color: $body-color;

}

　　index.html

　　

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" href="css/test.css" />

	</head>

	<body>

	</body>

</html>

　　下面将scss文件编译到css文件下

　　ruby命令行：sass --watch demo1/scss/test.scss:demo1/css/test.css        // --watch 可以不加，加上的目是在修改完scss文件后自动编译更新。

　　或ruby命令行：sass --watch demo1/scss/:demo1/css    //将demo1/scss下的文件全部编译到demo1/css文件下

　3.webpack打包编译并自动编译更新

　　

　　index.html:

　　

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<h1>webpack打包scss文件</h1>

		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>

　　sass.scss:

$color:#dbdbdb;

$font-color:#333333;

body{

    background-color: $color;

}

h1{

    color:$font-color;

}

　　index.js

require('./sass.scss');

　　webpack.config.js:

module.exports = {

  entry: './index.js',

  output: {

  	publicPath:'',

    filename: 'bundle.js'

  },

  module: {

    loaders: [

        {

            test:/\.scss$/,

            loader:['style-loader','css-loader','sass-loader']

          }

    ]

  }

}

　　package.json修改scripts如下：

  "scripts": {

    "start":"webpack-dev-server --progress --colors --hot --inline"

  },

　　node命令行：webpack

　　node命令行：webpack-dev-server

　　如果有很多报错，则是未安装一些模块和加载器。如果报cant find module 或 cant resole .......

　　如处理： cnpm install --save-dev css-loader    cnpm install --save-dev style-loader   cnpm install --save-dev sass-loader  cnpm install --save-dev node --sass

　　　　　　cnpm install --save-dev webpack webpack-dev-server

　　

sass 安装与使用的更多相关文章

  1. sass 安装、配置，css规则

    http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装  1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...

  2. Sass安装（windows版）

    Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/download ...

  3. win下sass安装失败的一种可能

    首先声明,本篇转自CSDN的LZGS_4. 今天我也遇到这个问题,就把文章擅自转载了,方便自己也方便更多的人吧. 因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网 ...

  4. windows下sass安装 以及一些要注意的问题

    都说sass 环境难配其时也没那么难 按照以下步骤一下一下来还是挺快的 如果你是喜欢less 那就当我没说 233333 1.sass 是基于ruby这门语言的需要使用 rubygem这个包管理器安装 ...

  5. sass安装 使用

    一 什么是sass      sass是一种css开发工具.提供了很多便利的写法,使得css开发变得简单  易维护       sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一 ...

  6. SASS安装的那些事

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  7. sass安装及使用

    在Mac系统下,Ruby一般已内置在其中,如果您不能确认是否已安装,或者说你不知道你的Ruby使用的版本,你可以打开你的命令工具: $ ruby -v 安装sass 在大多数情况和大部分人群中,还是喜 ...

  8. lnmp git ruby sass 安装

    1 cd .. 2 ls 3 cd mzx/ 4 ls 5 cd 桌面 6 cd lnmp1.4-full/ //到lnmp 的官网上下载后,根据官网的提示来安装lump 7 ls 8 install ...

  9. sass学习之一：sass安装compass部署

    主要参考 http://www.jianshu.com/p/5bfc9411f58f -------------------------------------------- sass基于ruby 需 ...

  10. sass安装方法，绝对好用的方式

    系统重做了,很多东西都重装,sass也一样,结果在安装的过程中遇到了问题,这里记录下,也给同样遇到问题的朋友们一个思路.本方法是参照http://www.w3cplus.com/sassguide/i ...

随机推荐

  1. 转：Siri之父：语音交互或将主导未来十年发展

    http://zhinengjiaohu.juhangye.com/201709/weixin_5664458.html Siri之父Adam Cheyer认为,语音交互很可能是未来十年内计算技术的一 ...

  2. CentOS7.4 chrony时间同步服务器部署（替代NTPD）

    Chrony是一个开源的自由软件,它能保持系统时钟与时钟服务器(NTP)同步,让时间保持精确. 它由两个程序组成:chronyd和chronyc. chronyd是一个后台运行的守护进程,用于调整内核 ...

  3. Unix 文件系统读写时权限校验

    文件系统中的所有文件都是在读出或写入时进行权限校验 一个问题,如果一个用户对一个普通文件有读写权限,在使用vim编辑时,管理员撤销掉此用户对此文件的写入权限 那么,这个普通用户还可以将修改写入文件吗?

  4. Apache Avro# 1.8.2 Specification （Avro 1.8.2规范）二

    h5 { text-indent: 0.71cm; margin-top: 0.49cm; margin-bottom: 0.51cm; direction: ltr; color: #000000; ...

  5. RepeatMasker使用中的问题

    RepeatMasker在运行时会先产生如下一个中间文件夹如RM_23346.WedAug301137422017,最后生成结果文件,例如.out,.masked,.tbl等 软件特性:软件运行很慢, ...

  6. 例子：js超级玛丽小游戏

    韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...

  7. [js高手之路]面向对象版本匀速运动框架

    这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...

  8. scala的Option

    当一个函数既要返回对象,又要返回null的时候,使用Option[] http://www.runoob.com/scala/scala-options.html Option是scala的选项,用来 ...

  9. Java工程读取resources中资源文件路径问题

    正常在Java工程中读取某路径下的文件时,可以采用绝对路径和相对路径,绝对路径没什么好说的,相对路径,即相对于当前类的路径.在本地工程和服务器中读取文件的方式有所不同,以下图配置文件为例. 本地读取资 ...

  10. jsp分页

    <%!    int pataSize=5;// 每页多少数据    int totalCount =0; //数据共多少    int pageCount = 0; ///数据共有多少页    ...