摘要：你還需安裝一個依賴，告訴使用者，你這個是基于哪個版本開發的，當然你可以不安裝這個依賴，那只能自己用了。開發調試在根目錄中運行在本機全局為做一個軟鏈接，如果你移動了目錄你得重新做軟鏈接。因為你在前面添加了文件事實上導入的文件是。

由于Stylus的強大，它支持SCSS LESS 靈活的書寫方式，然后它不用像SCSS安裝Ruby，不是特別出名，流行的工具沒有使用它，只是在小的圈子里面挺火滴。它的強大不用贅述了，我正在使用了它開始吧：最近為了方便自己將px轉換成rem寫了一個基于Stylus的插件，我就以它為例子吧，源碼在此stylus-px2rem

你本機需要安裝node，現在我假設你已經安裝好了node，建立好你的文件，這個是我的文件目錄，我將插件stylus-px2rem項目放在我本機的這個位置~/git/stylus-px2rem

stylus-px2rem # 項目根目錄
├── README.md
├── index.styl # px2rem入口文件
├── lib
│?? ├── px2rem.js # 這個很重要下面詳細描述
│?? ├── stylus-px2rem # Stylus插件需要的文件
│?? │?? ├── mixins.styl
│?? │?? ├── padding.styl
│?? │?? ├── width.styl
│?? │?? ....
│?? └── stylus-px2rem.styl # 同樣是px2rem的入口文件
├── node_modules # 依賴包其實可以啥包也不用
└── package.json # 配置文件

你可以通過npm init 一路Enter生成package.json基本標準的配置文件。你還需安裝一個Stylus依賴，告訴使用者，你這個是基于Stylus哪個版本開發的，當然你可以不安裝這個依賴，那只能自己用了。

{
  "name": "stylus-px2rem",
  "version": "1.0.4",
  "description": "Stylus convert px to rem in css files with optional fallback to px.",
  "main": "lib/px2rem.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/jaywcjlove/stylus-px2rem"
  },
  "keywords": [],
  "author": "kenny wang <398188662@qq.com>",
  "license": "MIT",
  "dependencies": {
    "stylus": "^0.54.2"
  }
}

這個配置文件package.json要注意添加一個 "main": "lib/px2rem.js" 這個很重要它指明你在使用這個包的一個根目錄，這個是在你使用Stylus的use方法必須要的js文件方便你找到你的styl文件。lib/px2rem.js 代碼

var plugin = module.exports = function plugin () {
    "use strict";
    return function (style) {
      style.include(__dirname);
    };
};
plugin.path    = __dirname;
plugin.version = require(__dirname + "/../package.json").version;

添加了這個js文件，你放在什么目錄在你使用這個插件，在styl文件中引入的路徑就變更了，你使用@import "stylus-px2rem" 的最終路徑是px2rem.js所在的項目絕對路徑，因為我是放在lib目錄中，所以路徑為絕對路徑/stylus-px2rem/lib/stylus-px2rem.styl。如果你不需要這個js文件很多時候會因為找不到你引入的styl文件而報錯。

我們將預處理文件全部放到./lib/stylus-px2rem目錄下名字跟包名字一樣，這樣方便你引入這個styl處理工具的時候保持一模一樣的名字。同樣你還需要建立一個stylus-px2rem.styl文件，其實這個是一個類似于軟鏈接一樣的，跟放在根目錄的index.styl文件是一樣的。

在index.styl 里面的類容是導入lib文件夾中的stylus-px2rem.styl 文件

@import "lib/stylus-px2rem.styl"

在stylus-px2rem.styl里面是導入你要與處理CSS的styl文件。

@import "stylus-px2rem/mixins"
@import "stylus-px2rem/font-size"
//...

文件建立好之后你就可以很方便的使用stylus-px2rem 工具了。

在stylus-px2rem根目錄中運行npm link在本機全局為stylus-px2rem做一個軟鏈接，如果你移動了stylus-px2rem目錄你得重新做軟鏈接。輸出下面內容你就可以在你的項目中調試使用了。

/usr/local/lib/node_modules/stylus-px2rem -> 
~/git/stylus-px2rem

你只需在你需要使用的項目中運行npm link stylus-px2rem在你的項目只再做一次軟鏈你就可以編輯你的插件，在你的項目中調試了。

新建 gulpfile.js 文件在stylus的use參數對象使用stylus-px2rem

var gulp = require("gulp");
var stylus = require("gulp-stylus");
var px2rem = require("stylus-px2rem");
gulp.task("stylus",function(){ 
  gulp.src("./styl/*.styl")
    .pipe(stylus({
        use:[px2rem()],
        compress:true
    }))
    .pipe(gulp.dest("./build")); 
})

在index.styl 中使用

@import "stylus-px2rem"
.banner{
    height 140px
    font-size 24px
}

在你做好配置之后你就可以跑你建立的gulp任務命令：gulp stylus

首先安裝 Stylus 工具，再安裝stylus-px2rem

$ npm install stylus --save

如果沒有發布調試過程，或者不打算發布，確定安裝上面步驟做好全局軟鏈了，你只需要在你使用的項目中做一次軟鏈就可以了。

$ npm link stylus-px2rem

如果你不需要調試，直接將stylus-px2rem發布到npmjs.org上面了就運行下面命令。

$ npm install stylus-px2rem --save

然后在你的package.json中添加scripts 就可以了

{
  "scripts": {
    "build": "stylus -u stylus-px2rem index.styl -o css/ -c",
    "watch": "stylus -u stylus-px2rem -w "index.styl" -o css/ -c "
  },
  "dependencies": {
    "stylus": "^0.54.2",
    "stylus-px2rem": "^1.0.4"
  }
}

然后在你的styl文件中引用即可，因為你上面的命令中使用了-u stylus-px2rem工具，所以你只需在index.styl中簡單倒入即可。

@import "stylus-px2rem"

因為你在前面添加了lib/px2rem.js文件事實上@import導入的文件是~/git/stylus-px2rem/lib/stylus-px2rem.styl。

在你的項目中添加好了之后你可以運行命令編譯或者監控自動編譯。

# 監控文件實時編譯CSS文件
$ npm run watch
# 直接編譯生成CSS文件
$ npm run build

假設你stylus工具是全局安裝的

npm install -g stylus # 全局安裝stylus
npm link stylus-px2rem # 調試的方法安裝到當前目錄

建立你的index.styl文件并使用stylus-px2rem。

/* 這種引用方式是你在目錄lib/px2rem.js指向了lib目錄，所以直接引用的是stylus-px2rem.styl文件 */
@import "stylus-px2rem"
/* 這種方式是lib/px2rem.js指向了這個目錄，你引用stylus-px2rem目錄中的styl文件 */
@import "stylus-px2rem/mixins"
@import "stylus-px2rem/font-size"
@import "stylus-px2rem/border"
@import "stylus-px2rem/margin"
div{
  width:30px
}

運行命令輸出CSS文件：

$ stylus -u stylus-px2rem index.styl

你的styl可以這樣引用stylus-px2rem處理文件

@import "node_modules/stylus-px2rem/lib/stylus-px2rem"

也可以一個一個的引用

@import "node_modules/stylus-px2rem/lib/stylus-px2rem/mixins"
@import "node_modules/stylus-px2rem/lib/stylus-px2rem/font-size"
@import "node_modules/stylus-px2rem/lib/stylus-px2rem/border"
@import "node_modules/stylus-px2rem/lib/stylus-px2rem/margin"
@import "node_modules/stylus-px2rem/lib/stylus-px2rem/padding"
@import "node_modules/stylus-px2rem/lib/stylus-px2rem/width"
@import "node_modules/stylus-px2rem/lib/stylus-px2rem/height"
@import "node_modules/stylus-px2rem/lib/stylus-px2rem/line-height"

關注公眾號