sass - Webpack not loading background image -

i trying load image:

background: transparent url("../img/select-icon.png") no-repeat center right 8px; 

at style.scss , not working

here webpack.config:

function _path(p) {   return path.join(__dirname, p); }  module.exports = {      context: __dirname,     entry: [         './assets/js/index'     ],       output: {         path: path.resolve('./assets/bundles/'),          filename: '[name].js'     },      devtool: 'inline-eval-cheap-source-map',      plugins: [         new bundletracker({filename: './webpack-stats.json'}),          new webpack.provideplugin({              $: 'jquery',             jquery: 'jquery',             'window.jquery': 'jquery'          }),         new happypack({             id: 'jsx',             threads: 4,             loaders: ["babel-loader"]         })      ],      module: {         loaders: [             {                 test: /\.css$/,                 include: path.resolve(__dirname, './assets/css/'),                 loader: "style-loader!css-loader"             },              {                 test: /\.scss$/,                 include: path.resolve(__dirname, './assets/css/'),                 loader: "style-loader!css-loader!sass-loader"             },              {                 test: /\.jsx?$/,                  include: path.resolve(__dirname, './assets/js/'),                 exclude: /node_modules/,                  loaders: ["happypack/loader?id=jsx"]             },             {                 test: /\.png$/,                 loader: 'file-loader'             }         ]     },      resolve: {         modulesdirectories: ['node_modules'],         extensions: ['', '.js', '.jsx'],         alias: {           'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask'),         },      }    } 

i using file-loader url rendered @ browser not match url of image.

i think not using source map: https://github.com/webpack/style-loader/issues/55

can help?

to resolve url('...') file output path need use resolve-url-loader before css-loader.

in webpack.config.js need make following changes:

//... module: {     loaders: [         {             test: /\.css$/,             include: path.resolve(__dirname, './assets/css/'),             loader: "style-loader!css-loader!resolve-url-loader"         },          {             test: /\.scss$/,             include: path.resolve(__dirname, './assets/css/'),             loader: "style-loader!css-loader!resolve-url-loader!sass-loader"         },         //...     ] } //... 

---

as optional configuration, can specify filename template file-loader uses. instead of having 96ab4c4434475d0d‌​23b82bcfc87be595.png instance, can have /img/select-icon.png.

in webpack.config.js default options of file-loader being used. means output filename using template [id].[ext]. being [id] chunk id , [ext] extension of file.

to specify output filename template need pass name parameter query of loader.

up point, require('../img/select-icon.png') should return '/img/select-icon.png'. resolve-url-loader use value.

//... module: {     loaders: [         //...         {             test: /\.png$/,             loader: 'file-loader',             query: {                 name: 'img/[name].[ext]'             }         },         //...     ] } //...