SASS学习系列之(二)--------- SASS,SCSS环境搭建(node-sass)

SASS,SCSS环境搭建(Ruby) http://blog.csdn.net/wx11408115/article/details/78019576

前期准备
1. node 环境. (没有安装的同学戳这里 window 下安装node.js http://blog.csdn.net/wx11408115/article/details/76609889

来来来,开始了

1.安装cnpm(https://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

这里写图片描述
没有报什么错就可以了,

2. Node-SASS安装

2.1 首先咱们新建个空文件夹,然后用命令行切到该文件夹下
cd 目标文件夹
npm init     (初始化一个项目)

这里写图片描述

初始化好了后,该空文件夹就会多一个package.json 的文件, 里面记录的内容是我们刚刚自己写的,

2.2 在项目文件夹下安装node-sass

cnpm install --save-dev node-sass      (cmd命令行中输入)

这里写图片描述
说明:–save-dev自动将node-sass加入到项目文件夹下的package.json中

现在我们可以看到文件夹中又多了一个文件夹
这里写图片描述

在 package.json中的配置下sass

{
  "name": "wifi",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass"  /*添加这句,复制的时候,需要去掉这句话哈,json注释不带这样的*/
  },
  "author": "WiFi_Uncle",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.5.3"
  }
}

保存

测试下

在文件夹中新建个input.scss
里面内容为:

.container {
    .main {
        color: #000;
    }
}

然后编译下
键入命令

npm run sass input.scss output.css

这里写图片描述
打开看看
这里写图片描述

ok了!

最后感谢233大神指点。

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值