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

This commit is contained in:
SleepWalker 2016-04-02 13:57:45 +03:00
parent 2736db3761
commit 0162d1270f
2 changed files with 28 additions and 1 deletions

View File

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

View File

@ -6,6 +6,7 @@ var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin');
var cssnano = require('cssnano'); var cssnano = require('cssnano');
var cssUrl = require("postcss-url");
var iconfontImporter = require('./webpack/node-sass-iconfont-importer'); var iconfontImporter = require('./webpack/node-sass-iconfont-importer');
/** /**
@ -41,6 +42,8 @@ try {
throw err; throw err;
} }
var rootPath = path.resolve('./src');
var webpackConfig = { var webpackConfig = {
entry: { entry: {
app: path.join(__dirname, 'src'), app: path.join(__dirname, 'src'),
@ -71,7 +74,7 @@ var webpackConfig = {
}, },
resolve: { resolve: {
root: path.resolve('./src'), root: rootPath,
extensions: ['', '.js', '.jsx'] extensions: ['', '.js', '.jsx']
}, },
@ -135,6 +138,10 @@ var webpackConfig = {
test: /\.jsx?$/, test: /\.jsx?$/,
exclude: /node_modules/, exclude: /node_modules/,
loader: 'babel' loader: 'babel'
},
{
test: /\.(png|gif|jpg)$/,
loader: 'url?limit=1000'
} }
] ]
}, },
@ -147,6 +154,24 @@ var webpackConfig = {
}, },
postcss: [ 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({ cssnano({
// sourcemap: !isProduction, // sourcemap: !isProduction,
autoprefixer: { autoprefixer: {