22629

Webpack file-loader duplicate public path

Question:

I'm using url-loader and file-loader to package up my sass files, but having an issue with image urls.

I've tried using resolve.alias to alias my images directory in the root of the application so I can use url(~images/myimage.png) in my sass files - this works fine with the url-loader, but if the images are picked up by file-loader they are output with a duplicate public path, i.e. dist/dist/[hash].png - this is the case whether I use ~ or a relative path. It works if I use an absolute path to my images, but then breaks if my app is mounted under a sub-directory.

Directory structure:

- images/ - js/ - styles/ - webpack.config.js

Webpack config:

module.exports = { entry: { app: './js/bootstrap' }, output: { filename: 'bundle.js', path: 'dist', publicPath: 'dist/' }, module: { loaders: [ { test: /\.scss$/, loader: ExtractPlugin.extract('style', 'css!sass') }, { test: /\.(gif|png|svg|jpe?g)$/i, loader: 'url', query: { limit: 1000 } } ] }, resolve: { // add alias for application code directory alias:{ js: path.resolve(__dirname, 'js'), styles: path.resolve(__dirname, 'styles'), images: path.resolve(__dirname, 'images') }, extensions: ['', '.js', '.scss', '.png', '.svg', '.jpg', '.jpeg', '.gif'] } };

Sass file:

.some-class{ background: url('~images/myimage.png') // url-loader works, file-loader doesn't background: url('../../../images/myimage.png') // url-loader works, file-loader doesn't background: url('/images/myimage.png') // both loaders work until app mounted under a sub-directory }

Hopefully I'm just missing something stupid!

Answer1:

I found a fix, overriding publicPath in the ExtractPlugin was what did it:

ExtractPlugin.extract('style', 'css!sass', { publicPath: './' })

Answer2:

Use publicPath, starting with /, i.e. /dist/ instead of dist/.

Otherwise, paths to your assets will be interpreted as relative and if one sass document, say, dist/daddy.scss imports another one from e.g. dist/child.scss, the path to child will be interpreted as relative to daddy's url "folder", which is dist, so browser will look for dist/dist/child.scss.

Recommend

  • What to use (best/good practice) for the secret key in HMAC solution?
  • How to search for a record and then delete it
  • respondsToSelector - not working
  • Can I disable IE compatibility mode only for content within a ?
  • bcrypt-nodejs compare method returns false every time
  • Python 2.7 on OS X: TypeError: 'frozenset' object is not callable on each command
  • Gforce min not supported for character in data.table
  • Merge list of objects into consistent list based on common matching attribute in Python
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • Using Netbeans with Cygwin and SDL, including SDL.h creates strange error
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Insert records if not exist SQL Server 2005
  • force json_encode to create strings
  • Making header act like google chrome mobile app address bar
  • Unique Permutations - with exceptions
  • Python 3.2.2, error(scripts to exe)
  • Cloud Code function running twice
  • error importing numpy
  • Rails Find when some params will be blank
  • Why does access(2) check for real and not effective UID?
  • Checking free space on FTP server
  • Handling un-mapped Rest path
  • Paperclip, set path outside of rails root folder
  • req.body is undefined - nodejs
  • script to move all files from one location to another location
  • ILMerge & Keep Assembly Name
  • Symfony2: How to get request parameter
  • How to make Safari send if-modified-since header?
  • Akka Routing: Reply's send to router ends up as dead letters
  • How to pass list parameters for each object using Spring MVC?
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Is there a mandatory requirement to switch app.yaml?
  • JTable with a ScrollPane misbehaving
  • Memory offsets in inline assembly
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • unknown Exception android
  • JaxB to read class hierarchy
  • failed to connect to specific WiFi in android programmatically
  • How can I use threading to 'tick' a timer to be accessed by other threads?