Суппорт картинок в scss

package.json

@@ -68,10 +68,12 @@
     "node-sass": "^3.4.2",
     "phantomjs-prebuilt": "^2.0.0",
     "postcss-loader": "^0.8.0",
+    "postcss-url": "^5.1.1",
     "react-addons-test-utils": "^0.14.3",
     "sass-loader": "^3.1.2",
     "sinon": "^1.15.3",
     "style-loader": "^0.13.0",
+    "url-loader": "^0.5.7",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
   }

webpack.config.js

@@ -6,6 +6,7 @@ var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var cssnano = require('cssnano');
+var cssUrl = require("postcss-url");
 var iconfontImporter = require('./webpack/node-sass-iconfont-importer');
 
 /**
@@ -41,6 +42,8 @@ try {
     throw err;
 }
 
+var rootPath = path.resolve('./src');
+
 var webpackConfig = {
     entry: {
         app: path.join(__dirname, 'src'),
@@ -71,7 +74,7 @@ var webpackConfig = {
     },
 
     resolve: {
-        root: path.resolve('./src'),
+        root: rootPath,
         extensions: ['', '.js', '.jsx']
     },
 
@@ -135,6 +138,10 @@ var webpackConfig = {
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
                 loader: 'babel'
+            },
+            {
+                test: /\.(png|gif|jpg)$/,
+                loader: 'url?limit=1000'
             }
         ]
     },
@@ -147,6 +154,24 @@ var webpackConfig = {
     },
 
     postcss: [
+        cssUrl({
+            url: function(url, decl, from, dirname, to, options, result) {
+                // scss не правильно резолвит относительные урлы.
+                // добавляем к урлам остаток пути, что бы они были относительно root
+                //
+                // Например:
+                // file: components/ui/foo.scss
+                // images/foo.png -> components/ui/images/foo.png
+
+                if (url[0] !== '/') {
+                    var relativeToRoot = dirname.split(rootPath + '/')[1];
+
+                    return path.join(relativeToRoot, url);
+                }
+
+                return url;
+            }
+        }),
         cssnano({
             // sourcemap: !isProduction,
             autoprefixer: {