{"id":15703886,"url":"https://github.com/youzan/sprite-loader","last_synced_at":"2025-04-15T01:07:50.024Z","repository":{"id":57368034,"uuid":"81524858","full_name":"youzan/sprite-loader","owner":"youzan","description":"A image sprite loader for webpack.","archived":false,"fork":false,"pushed_at":"2018-04-20T03:43:03.000Z","size":4790,"stargazers_count":83,"open_issues_count":7,"forks_count":16,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-15T01:07:40.585Z","etag":null,"topics":["image-sprite","javascript","sprite","stylesheet","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/youzan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-10T04:03:44.000Z","updated_at":"2022-01-25T10:23:43.000Z","dependencies_parsed_at":"2022-08-23T20:11:04.086Z","dependency_job_id":null,"html_url":"https://github.com/youzan/sprite-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youzan%2Fsprite-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youzan%2Fsprite-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youzan%2Fsprite-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youzan%2Fsprite-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youzan","download_url":"https://codeload.github.com/youzan/sprite-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248986312,"owners_count":21194025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-sprite","javascript","sprite","stylesheet","webpack-loader"],"created_at":"2024-10-03T20:07:46.794Z","updated_at":"2025-04-15T01:07:50.006Z","avatar_url":"https://github.com/youzan.png","language":"JavaScript","readme":"\u003cp\u003e\n\u003ca href=\"https://github.com/youzan/\"\u003e\u003cimg alt=\"有赞logo\" width=\"36px\" src=\"https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png\" alt=\"youzan\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003esprite-loader\u003c/p\u003e\n\n## Introduction\n[中文版](https://github.com/youzan/sprite-loader/blob/master/README_ZH.md)\n\nsprite-loader is an image sprite generate tool.It helps you to resolve the troublesome of make sprite manually.\n\n## Installation\n```\nnpm install sprite-loader --save\n```\n\n## Configuration\n```\n// for webpack 1\nloaders: [\n    {\n        test: /\\.css/,\n        loader: 'style!css!sprite'\n    },\n    {\n        test: /\\.scss$/,\n        loader: 'style!css!sprite!sass'\n    }\n]\n\n// for webpack 2\nrules: [\n    {\n        test: /\\.css/,\n        use: ['style-loader', 'css-loader', 'sprite-loader']\n    },\n    {\n        test: /\\.scss$/,\n        use: ['style-loader', 'css-loader', 'sprite-loader', 'sass-loader']\n    }\n]\n```\n## Usage\n### 1.Basic Usage\nFirst of all, add a comment in the first line of the file to enable sprite-loader.Then the loader will identify images and make sprites.\n\n```\n/* sprite-loader-enable */\n.flip_flops {\n    width: 16px;\n    height: 16px;\n    background: url(./img/flip_flops@2x.png);\n}\n.tram {\n    width: 50px;\n    height: 50px;\n    background: url(./img/tram@2x.png);\n}\n.pie {\n    width: 100px;\n    height: 100px;\n    background: url(./img/pie@2x.png);\n}\n```\n### 2.Adapt Retina Screen\nIt's very easy to adapt Retina screen. You just need to use double size images and name them as xxx@2x.png. sprite-loader will generate 1x images and media query automatically.\n\n### 3.Disable Combination\nsprite-loader will collect all the background and background-image attributes in css files to combine. Except for following circumstance:\n\n1. Images that set the background-position and background-size.\n\t\n\t```\n\t/* ignore images that set background-position */\n\t.bg1{background: url(1.png) no-repeat -10px -10px;}\n\t/* ignore images that set background-size的 */\n\t.bg2{background: url(2.png); background-size: 10px 10px;}\n\t```\n2. Image url that contain #spriteignore string.\n\t\n\t```\n\t/* ignore all images that contain #spriteignore */\n\t.bg3{background: url(3.png#spriteignore);}\n\t```\n\t\n## Licence\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyouzan%2Fsprite-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyouzan%2Fsprite-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyouzan%2Fsprite-loader/lists"}