bootstrap-sass安装使用
2015-11-28 19:18
651 查看
1、安装ruby 下载ruby
安装完后更新源替换为ruby淘宝镜像
gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
gem sources -l
2、安装nodejs 下载nodejs
autoprefixer-rails需要用到
3、运行命令行逐个运行
gem install sass
gem install compass
gem install bootstrap-sass
gem install autoprefixer-rails
4、创建bootstrap-sass项目
命令行工具cd 到相应目录 运行如下命令新建项目
compass create my-new-project -r bootstrap-sass --using bootstrap
5、打开项目中的 config.rb添加如下代码支持autoprefixer
6、命令行 cd到项目目录
普通编译运行命令
compass compile
编译压缩文件运行命令
compass compile --output-style compressed
7、如果提示GBK错误
找到ruby的安装目录,里面也有sass模块,如这个路径:C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在这个文件里面engine.rb,添加一行代码:
放在所有的require XXXX 之后即可。
![](https://img-blog.csdn.net/20160506170911727?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
npm淘宝镜像跟node-sass淘宝连接设置
修改文件C:\Users\电脑用户名\.npmrc
npm config set registry=https://registry.npm.taobao.org
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
安装完后更新源替换为ruby淘宝镜像
gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
gem sources -l
2、安装nodejs 下载nodejs
autoprefixer-rails需要用到
3、运行命令行逐个运行
gem install sass
gem install compass
gem install bootstrap-sass
gem install autoprefixer-rails
4、创建bootstrap-sass项目
命令行工具cd 到相应目录 运行如下命令新建项目
compass create my-new-project -r bootstrap-sass --using bootstrap
5、打开项目中的 config.rb添加如下代码支持autoprefixer
require 'autoprefixer-rails' on_stylesheet_saved do |file| css = File.read(file) map = file + '.map' if File.exists? map result = AutoprefixerRails.process(css, from: file, to: file, map: { prev: File.read(map), inline: false }) File.open(file, 'w') { |io| io << result.css } File.open(map, 'w') { |io| io << result.map } else File.open(file, 'w') { |io| io << AutoprefixerRails.process(css) } end end
6、命令行 cd到项目目录
普通编译运行命令
compass compile
编译压缩文件运行命令
compass compile --output-style compressed
7、如果提示GBK错误
找到ruby的安装目录,里面也有sass模块,如这个路径:C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在这个文件里面engine.rb,添加一行代码:
Encoding.default_external = Encoding.find('utf-8')
放在所有的require XXXX 之后即可。
npm淘宝镜像跟node-sass淘宝连接设置
修改文件C:\Users\电脑用户名\.npmrc
npm config set registry=https://registry.npm.taobao.org
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- Bootstrap每天必学之前端开发框架
- 基于Bootstrap的网页设计实例
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- Bootstrap每天必学之按钮
- 全系IE支持Bootstrap的解决方法
- Bootstrap每天必学之标签与徽章
- 详解基于Bootstrap扁平化的后台框架Ace
- Bootstrap每天必学之表单
- Bootstrap每天必学之按钮(一)
- BootStrap实现带有增删改查功能的表格(DEMO详解)
- 通过Tabs方法基于easyUI+bootstrap制作工作站
- BootStrap栅格系统、表单样式与按钮样式源码解析
- jfinal与bootstrap的登录跳转实战演习
- Bootstrap每天必学之基础排版
- angularJS与bootstrap结合实现动态加载弹出提示内容
- bootstrap data与jquery .data
- Bootstrap每天必学之栅格系统(布局)