1.0.3

Author: sunft1996

README.CN.md

@@ -4,9 +4,11 @@
 ![image](https://img.shields.io/badge/license-MIT-green)
 ![image](https://img.shields.io/badge/webpack-%5E4.0.0-blue)
 ## 介绍
-sprite-smith-loader是一款自动生成雪碧图工具，你可以在webpack中使用它，它会自动生成雪碧图并修改相应的css代码。
+sprite-smith-loader是一款自动生成雪碧图工具，你可以在webpack中使用它，它会遍历css中以_sprite.png结尾的图片并自动生成雪碧图，然后修改相应的css代码。
 
 支持**CSS**、**SASS**、**LESS**。
+
+图片应为png格式（不要直接将图片后缀改为png）。
 ## 安装
 下载sprite-smith-loader
 
@@ -62,7 +64,7 @@ module.exports = {
 
 
 ## 使用
-修改你的 CSS/SCSS/SASS/LESS 文件
+修改图片名以 **_sprite.png** 结尾，并在css中引入它
 
 ```
 .my_bg_1{
@@ -79,7 +81,7 @@ module.exports = {
     background-size: 150px 150px;
 }
 ```
-雪碧图生成后，loader会修改css中background属性，为了准确计算转化后的background属性，请你遵循以下规范：
+只要你遵循以下规范，loader会在css中引入生成的雪碧图作为新的背景图，并替换background-size、background-position等属性。
 
 
 属性名 | 是否必填 | 说明

README.md

@@ -6,9 +6,11 @@
 
 :rocket: [中文文档点这里](https://github.com/sunft1996/sprite-smith-loader/blob/master/README.CN.md/)
 ## Introduce
-Sprite Smith loader is a tool for automatically generating CSS Sprites. You can use it in webpack. It will automatically generate CSS Sprites and modify the corresponding CSS code.
+Sprite Smith loader is a tool for automatically generating CSS Sprites. You can use it in webpack. It will find all the_ sprite.png End picture and auto generate CSS Sprites and modify the corresponding CSS code.
 
 supports **CSS**、**SASS**、**LESS**.
+
+The picture should be in PNG format (do not directly change the picture suffix to PNG)
 ## Getting Started
 To begin, you'll need to install sprite-smith-loader:
 
@@ -40,7 +42,7 @@ module.exports = {
   },
 };
 ```
-with SaSS 
+with SASS 
 
 ```
 module.exports = {
@@ -64,7 +66,7 @@ module.exports = {
 ```
 
 ## Usage
-Modify your CSS/SCSS/SASS/LESS file
+Change the picture name to_ sprite.png  End and reference it in CSS
 ```
 .my_bg_1{
     height: 100px;

demo/loaders/sprite-smith-loader.js

@@ -174,6 +174,10 @@ module.exports = function (source) {
                             return;
                         }
                     }
+                    // 没有定义background-position
+                    if(bgLineEnd == node.sourceIndex && x === undefined && y === undefined){
+                        node.value = - coord[item.url].x * ratio + 'px ' + - coord[item.url].y * ratio + 'px;'
+                    }
                 });
             }
         }

dist/index.js

@@ -174,6 +174,10 @@ module.exports = function (source) {
                             return;
                         }
                     }
+                    // 没有定义background-position
+                    if(bgLineEnd == node.sourceIndex && x === undefined && y === undefined){
+                        node.value = - coord[item.url].x * ratio + 'px ' + - coord[item.url].y * ratio + 'px;'
+                    }
                 });
             }
         }