wepy-compiler-styl

wepy stylus 编译器

Note: wepy官方提供的插件wepy-compiler-stylus对stylus的封装不太友好，不方便开发者配置一些高级特性，因此重新封装了一个stylus的编译插件wepy-compiler-styl。

如果该插件对您的开发有所帮助，请五星好评哦！^^ ^^ ^_^

---

Table of contents

• Features
• Installation
• Usage
• Examples

Features

Support a few advanced features

• define
• rawDefine
• include
• import
• includeCSS
• url

Original features

• globals
• functions
• use
• imports
• paths
• filename
• Evaluator
• ...

Installation

cnpm install wepy-compiler-styl --save-dev

Usage

// configure wepy.config.js

module.exports = {
  compilers: {
    styl: {
      compress: true
    }
  }
};

Examples

// configure wepy.config.js

module.exports = {
  compilers: {
    styl: {
      compress: true,                                 // 压缩
      includeCSS: true,                               // 支持导入css
      supportObject: true,                            // 支持以下参数
      define: {                                       // 外部传入全局变量和函数
        isProd: process.env.NODE_ENV === 'production' // 举例：控制不同环境的样式处理
      },
      include: [],                                    // 等价于 paths: [__dirname, __dirname + '/utils']，将目录暴露给全局
      import: [                                       // 导入自定义的functions和mixins等，千万不要导入全局公共样式，否则你懂的哦
        path.join('src', 'css', 'utils', '**/*.styl')
      ],
      url: 'inline-url',                              // 使用base64将图片转码
      url: {
        name: 'inline-url',
        limit: 30000,                                 // 限制多少B以内的图片被压缩
        paths: []                                     // 从指定的目录下查找图片
      },

      // ============= stylus 内部参数 =============
      globals: {                                      // 外部传入全局变量
        isProd: process.env.NODE_ENV === 'production'
      },
      functions: {}                                   // 外部传入全局函数
      use: [],                                        // 导入插件nib、poststylus等
      imports: [                                      // 导入自定义的functions和mixins等，千万不要导入全局公共样式，否则你懂的哦
        path.join('src', 'css', 'utils', '**/*.styl')
      ],
      paths: [],                                      // 将目录暴露给全局
      filename: [],                                   // 设置文件名
      Evaluator: Object                               // 没用过，我也不知道
    }
  }
};