{"action":"created","issue":{"url":"https://api.github.com/repos/webpack-contrib/sass-loader/issues/544","repository_url":"https://api.github.com/repos/webpack-contrib/sass-loader","labels_url":"https://api.github.com/repos/webpack-contrib/sass-loader/issues/544/labels{/name}","comments_url":"https://api.github.com/repos/webpack-contrib/sass-loader/issues/544/comments","events_url":"https://api.github.com/repos/webpack-contrib/sass-loader/issues/544/events","html_url":"https://github.com/webpack-contrib/sass-loader/issues/544","id":301859832,"number":544,"title":"background-image: url(...) broken in browser console, might be related to missing sourcemap?","user":{"login":"ishraqiyun77","id":33135849,"avatar_url":"https://avatars2.githubusercontent.com/u/33135849?v=4","gravatar_id":"","url":"https://api.github.com/users/ishraqiyun77","html_url":"https://github.com/ishraqiyun77","followers_url":"https://api.github.com/users/ishraqiyun77/followers","following_url":"https://api.github.com/users/ishraqiyun77/following{/other_user}","gists_url":"https://api.github.com/users/ishraqiyun77/gists{/gist_id}","starred_url":"https://api.github.com/users/ishraqiyun77/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ishraqiyun77/subscriptions","organizations_url":"https://api.github.com/users/ishraqiyun77/orgs","repos_url":"https://api.github.com/users/ishraqiyun77/repos","events_url":"https://api.github.com/users/ishraqiyun77/events{/privacy}","received_events_url":"https://api.github.com/users/ishraqiyun77/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-03-02T18:23:57Z","updated_at":"2018-03-02T18:36:17Z","closed_at":null,"author_association":"NONE","body":"Been trying to get assistance on SO regarding this, but getting no where.\r\n\r\nThe issue is related to `url()` which the `sass-loader` documentation predicts there might be. Followed the related documentation and am not able to produce the desired result. Essentially, I have a `background-image: url(...)` that isn't loading in the browser despite it point at the correct file and location. The image file is being moved into my `./bundles/img/` directory, the browser is looking at the file in the directory, it just isn't displaying it--it is a broken image icon.\r\n\r\nMy server does have 404 on these, so it might be related:\r\n\r\n![image](https://user-images.githubusercontent.com/33135849/36914692-036550d2-1e03-11e8-9a9c-22c8fab36c4a.png)\r\n\r\nMy `webpack.config.js` should be producing any relevant sourcemaps:\r\n\r\n```\r\nvar path = require('path');\r\nvar webpack = require('webpack');\r\nvar BundleTracker = require('webpack-bundle-tracker');\r\nvar ExtractTextPlugin = require('extract-text-webpack-plugin');\r\n\r\nconst VENDOR_LIBS = [\r\n  'axios', 'history', 'lodash', 'prop-types', 'react', 'react-dom', 'react-dropzone', 'react-redux', 'react-router-dom', 'react-router-redux', 'redux', 'redux-form', 'redux-thunk', 'reactstrap', 'react-responsive'\r\n]\r\n\r\nmodule.exports = {\r\n  context: __dirname,\r\n\r\n  entry: {\r\n    app: '../react/index',\r\n    vendor: VENDOR_LIBS\r\n  },\r\n\r\n  output: {\r\n      path: path.resolve('./src/assets/bundles/'),\r\n      filename: './js/[name].[chunkhash].js'\r\n  },\r\n\r\n  module: {\r\n    rules: [\r\n      { \r\n        loader: 'babel-loader',\r\n        test: /\\.js$/, \r\n        exclude: /node_modules/, \r\n        query: {\r\n          presets: [\"react\", \"es2015\", \"stage-1\"]\r\n        }\r\n      },\r\n      {\r\n        test: /\\.json$/,\r\n        loader: ['json-loader'] \r\n      },\r\n      {\r\n        test: /\\.png|jpg$/,\r\n        use: [\r\n          {\r\n            loader: 'file-loader',\r\n            options: {\r\n              publicPath: path.resolve('./src/assets/bundles/img/'),\r\n              outputPath: 'img/',\r\n              include: path.join(__dirname, 'assets/img'),\r\n              \r\n            }\r\n          }\r\n        ]\r\n      },\r\n      {\r\n        test: /\\.scss$/,\r\n        use: ExtractTextPlugin.extract({\r\n          fallback: 'style-loader',\r\n          use: [\r\n            {\r\n              loader: 'css-loader',\r\n              options: {\r\n                sourceMap: true\r\n              }\r\n            },\r\n            {\r\n              loader: 'resolve-url-loader'            \r\n            },\r\n            {\r\n              loader: 'sass-loader?sourceMap',\r\n              options: {\r\n                sourceMap: true\r\n              }\r\n            }\r\n          ]\r\n        })      \r\n      },   \r\n    ],\r\n  },\r\n  plugins: [\r\n    new webpack.optimize.CommonsChunkPlugin({\r\n      names: ['vendor', 'manifest']\r\n    }),\r\n    new BundleTracker({filename: './src/config/webpack-stats.json'}),\r\n    new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})\r\n  ],\r\n  resolve: {\r\n    extensions: ['*', '.js', '.jsx', '.json', '.gif', '.png'],\r\n  },\r\n}\r\n```\r\n\r\nThe produced CSS does have sourcemap sections in it.\r\n\r\nThis is the Sass I am working with:\r\n```\r\n@mixin cust-box($color) {\r\n    background-color: $color;\r\n    padding: 20px;\r\n}\r\n\r\n.products {\r\n    .custom-blue-box {\r\n        @include cust-box($blue);\r\n        background-image: url('../img/bg_homebluebox.png');\r\n        margin: 7px;\r\n    }\r\n}\r\n```\r\n\r\nThis is my directory structure:\r\n```\r\n/app\r\n    /src\r\n        /assets\r\n            /bundles\r\n                /css\r\n               /img\r\n                    a65erg66.png // related to bg_homebluebox.png\r\n                /js\r\n            /img\r\n                bg_homebluebox.png\r\n            /scss\r\n                login.scss\r\n        /config\r\n            webpack.config.js\r\n        /react\r\n            /containers\r\n                /authentication\r\n                    signin.js\r\n            index.js // entry point\r\n```\r\nHere you can see it looking at the image but it isn't loading:\r\n\r\n![image](https://user-images.githubusercontent.com/33135849/36914903-b2569a24-1e03-11e8-9c5a-4f1e3b6da588.png)\r\n"},"comment":{"url":"https://api.github.com/repos/webpack-contrib/sass-loader/issues/comments/370012545","html_url":"https://github.com/webpack-contrib/sass-loader/issues/544#issuecomment-370012545","issue_url":"https://api.github.com/repos/webpack-contrib/sass-loader/issues/544","id":370012545,"user":{"login":"ishraqiyun77","id":33135849,"avatar_url":"https://avatars2.githubusercontent.com/u/33135849?v=4","gravatar_id":"","url":"https://api.github.com/users/ishraqiyun77","html_url":"https://github.com/ishraqiyun77","followers_url":"https://api.github.com/users/ishraqiyun77/followers","following_url":"https://api.github.com/users/ishraqiyun77/following{/other_user}","gists_url":"https://api.github.com/users/ishraqiyun77/gists{/gist_id}","starred_url":"https://api.github.com/users/ishraqiyun77/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ishraqiyun77/subscriptions","organizations_url":"https://api.github.com/users/ishraqiyun77/orgs","repos_url":"https://api.github.com/users/ishraqiyun77/repos","events_url":"https://api.github.com/users/ishraqiyun77/events{/privacy}","received_events_url":"https://api.github.com/users/ishraqiyun77/received_events","type":"User","site_admin":false},"created_at":"2018-03-02T18:36:17Z","updated_at":"2018-03-02T18:36:17Z","author_association":"NONE","body":"Will do. I have Django and webpack-loader running server side. Would you like that as well?"}}
{"actor":{"display_login":"ishraqiyun77"}}