css-loader: problem with background url
Hi,
I’m having a problem when loading a image with url(). I would like to have background: url(../build/images/brew.jpg);
but in app.css I have background: url(/images/bg.jpg);
I tried the ‘root’ attribute from the doc but it’s doesn’t work…
What I’m doing wrong ? 😢
base.scss :
background: url('../images/bg.jpg');
app.css
background: url(/images/bg.jpg);
There is my src folder :
├── src <span class="pl-k">|</span> ├── stylesheets <span class="pl-k">|</span> <span class="pl-k">|</span> └── <span class="pl-smi">base</span>.<span class="pl-smi">.scss</span> <span class="pl-k">|</span> ├── images <span class="pl-k">|</span> <span class="pl-k">|</span> └── <span class="pl-smi">bg</span>.<span class="pl-smi">png</span> <span class="pl-k">|</span> └── javascripts <span class="pl-k">|</span> └── <span class="pl-smi">index</span>.<span class="pl-smi">js</span> .
There is my build folder :
├── src <span class="pl-k">|</span> ├── images <span class="pl-k">|</span> <span class="pl-k">|</span> └── <span class="pl-smi">bg</span>.<span class="pl-smi">png</span> <span class="pl-k">|</span> - app.js <span class="pl-k">|</span> - app.css
my webpack config
const autoprefixer = require('autoprefixer') const ExtractTextPlugin = require('extract-text-webpack-plugin') const path = require('path') const sassLoaders = [ 'css-loader', 'postcss-loader', 'sass-loader?includePaths[]=' + path.resolve(__dirname, './src') ] const config = { entry: { app: ['./src/index'] }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?hash=sha512&digest=hex&name=images/[name].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' ] } ] }, output: { filename: '[name].js', path: path.join(__dirname, './build/'), publicPath: '/' }, plugins: [ new ExtractTextPlugin('[name].css') ], postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ], resolve: { extensions: ['', '.js', '.scss'], modulesDirectories: ['src', 'node_modules'] } } module.exports = config
Thanks !
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 19
- Comments: 28 (2 by maintainers)
Add ?url=false to your css-loader, that will disable url handling :
If you try to use ~ before your path to the image. Like this:
background-url: (~assets/image/myimage)
. You should config resolve property in your webpack like this:You can also try using
~
before you path to the imageNotably:
background-url: (~assets/image/myimage)
should resolve the pathI think one of the following should work:
(this one may need webpack resolve.root set to ‘src’)
I will doublecheck a bit later
I don’t think this should have been closed. There is lots of confusion around the issue still, and no official recommended way to resolve it.
Solution: https://github.com/vuejs/vue-loader/issues/481
Hey, it was I found similar problems here: http://stackoverflow.com/questions/37288886/webpack-background-images-not-loading
Ref1: https://github.com/webpack-contrib/css-loader/issues/232 Ref2: https://github.com/webpack-contrib/style-loader/issues/55
In my case, it did get fixed when I removed
?sourceMap
from css-loader@evilebottnawi @d3viant0ne Is there a recommended solution for this problem given that the thread has many different possible solutions? What is the recommended way of using local images as background image urls?
@egeersoz I agree. @lndj - thanks for the link, it worked for me. For anyone put off by an unfamiliar character set:
@volkanunsal downgrade
file-loader
(1.0.0
is still beta)@Harti
resolve
is a first-level key on the webpack.config object.Same problem here. Tried to use
background: url(/background.png)
and@font-face: src(/something.woff)
with css-loader and file-loader. Only browser that works with this is IE11. I eventually switched to using url-loader for these files. I only tried serving this with webpack-dev-server@kumarharsh have you set publicPath in webpack config? I’ve used leading slash when setting publicPath and it works ok
Same issue here. Tried for hours to tweak config settings, and nothing worked. This seems to be happening quite a bit with this loader. The system should be more forgiving.