diff --git a/package.json b/package.json index 4287f79..d1d7fa0 100644 --- a/package.json +++ b/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" } diff --git a/webpack.config.js b/webpack.config.js index 2cdcd30..8913634 100644 --- a/webpack.config.js +++ b/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: {