sass 安装与使用
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 安装与使用的更多相关文章
- sass 安装、配置,css规则
http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装 1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...
- Sass安装(windows版)
Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/download ...
- win下sass安装失败的一种可能
首先声明,本篇转自CSDN的LZGS_4. 今天我也遇到这个问题,就把文章擅自转载了,方便自己也方便更多的人吧. 因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网 ...
- windows下sass安装 以及一些要注意的问题
都说sass 环境难配其时也没那么难 按照以下步骤一下一下来还是挺快的 如果你是喜欢less 那就当我没说 233333 1.sass 是基于ruby这门语言的需要使用 rubygem这个包管理器安装 ...
- sass安装 使用
一 什么是sass sass是一种css开发工具.提供了很多便利的写法,使得css开发变得简单 易维护 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一 ...
- SASS安装的那些事
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- sass安装及使用
在Mac系统下,Ruby一般已内置在其中,如果您不能确认是否已安装,或者说你不知道你的Ruby使用的版本,你可以打开你的命令工具: $ ruby -v 安装sass 在大多数情况和大部分人群中,还是喜 ...
- 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 ...
- sass学习之一:sass安装compass部署
主要参考 http://www.jianshu.com/p/5bfc9411f58f -------------------------------------------- sass基于ruby 需 ...
- sass安装方法,绝对好用的方式
系统重做了,很多东西都重装,sass也一样,结果在安装的过程中遇到了问题,这里记录下,也给同样遇到问题的朋友们一个思路.本方法是参照http://www.w3cplus.com/sassguide/i ...
随机推荐
- arcgis api for js之echarts开源js库实现地图统计图分析
前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...
- c#$用法
为什么会出现$符号,c#6.0才出现的新特性 var s = string.Fromat("{0}+{1}={2}",12,23,12+23) 用起来必须输入string.From ...
- golang sql database drivers
https://github.com/golang/go/wiki/SQLDrivers SQL database drivers The database/sql and database/sql/ ...
- centos 打包RPM包 ntopng
需要在centos7上,将ntopng及其依赖的包一起打包成rpm包,了解centos7打包. 1.执行: yum -y install rpmdevtools 安装rpm工具 2.接下来执行:rp ...
- 房上的猫:StringBuffer类
一.使用StringBuffer类 StringBuffer类位于java.lang包中,是String类的增强类 步骤: 1.声明StringBuffer对象并初始化 StringBuffer s ...
- admin
执行顺序 : Admin 执行admin.py,导入models 第一次进来的时候,先创建admin.site对象(如果下次再有引入,不会重新创建) 拿到对象后执行该对象下的register()方法 ...
- iOS学习——UI相关小结
1 StoryBoard: 在Info.plist中可以查看Main storyboard,即入口storyboard,默认为main.storyboard,可以修改为自己创建的storybo ...
- SAP中的BOPF(Business Object Processing Framework)
希望简化你的业务应用开发过程?业务对象处理框架(Business Object Processing Framework,以下简称BOPF)也许可以帮到你. BOPF是SAP Business Sui ...
- Mongodb常规操作【一】
Mongodb是一种比较常见的NOSQL数据库,数据库排名第四,今天介绍一下Net Core 下,常规操作. 首先下C# 版的驱动程序 "MongoDB.Driver",相关依赖包 ...
- [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??
0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...