README

Magento 2 Grunt Sprite 工具

基于 Grunt 的 Magento 2 图标精灵生成工具

安装

1. 运行 composer require magekey/grunt-sprite
2. 进入包目录 cd vendor/magekey/grunt-sprite
3. 运行 npm install
4. 运行 grunt setup 在项目根目录创建便利的符号链接 grunt-sprite 和配置文件 grunt-sprite-config.json.sample。
5. 将 grunt-sprite-config.json.sample 重命名为 grunt-sprite-config.json 并定义你的主题

LESS 示例

{
  "path": {
    "sprite_mytheme": "<%= project %>/app/design/frontend/Vendor/mytheme/web"
  },
  "sprite": {
    "mytheme": {
      "src": "<%= sprite_mytheme %>/images/sprite/*.png",
      "dest": "<%= sprite_mytheme %>/images/sprite.png",
      "destCss": "<%= sprite_mytheme %>/css/source/_sprite.less"
    }
  }
}

SCSS 示例

{
  "path": {
    "sprite_mymodule": "<%= project %>/app/design/frontend/Vendor/mytheme"
  },
  "sprite": {
    "test_module": {
      "src": "<%= sprite_mymodule %>/MyPackage_Module/web/images/sprite/*.png",
      "dest": "<%= sprite_mymodule %>/MyPackage_Module/web/images/sprite.png",
      "destCss": "<%= sprite_mymodule %>/MyPackage_Module/web/scss/_sprite.scss",
      "cssTemplate": "<%= src %>/templates/scss.template.handlebars"
    }
  }
}

使用方法

cd grunt-sprite
grunt sprite:<sprite>

将精灵添加到你的主题中 app/design/Vendor/theme/web/css/_styles.less

@import 'source/lib/_lib.less'; // Global lib
@import 'source/_sources.less'; // Theme styles
@import 'source/_components.less'; // Components styles (modal/sliding panel)

// Add new line to import sprites
@import 'source/_sprite.less'; // Sprites