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大神指点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文标题:Gulp for Beginners作者: Zell Liew翻译:治电小白菜原文地址:https://...
    ZZES_ZCDC阅读 1,604评论 6 18
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 949评论 0 1
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,571评论 1 17
  • 前期准备: 首先你得有node环境,和一个已能手动编译scss的环境 node 环境. (没有安装的同学戳这里 w...
    WiFi_Uncle阅读 1,390评论 0 1
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,227评论 7 35