Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#18064 closed defect (invalid)

relative image path not updated when optimizing css during dojo build

Reported by: joyceyu Owned by: joyceyu
Priority: undecided Milestone: tbd
Component: BuildSystem Version: 1.9.3
Keywords: Cc:
Blocked By: Blocking:

Description

When trying to optimize the css during a dojo build (using either comments or comments.keeplines), the relative path of an image in the css isn't updated when a css is imported from a subfolder and throws "error(357): While optimizing a CSS file, it was impossible to compute the destination location of a relative URL"

For example:

  • In a.css: @import url("folder/b.css");
  • In b.css: background: #000000 url("../../images/icon.png") no-repeat left 1px;

When css is optimized and b.css is brought into a.css, that relative image url should be updated to "../images/icon.png" (1 folder up), but that didn't happen so the image paths are all wrong afterwards.

I used dojo 1.9.1 and 1.9.3, but had the same problem. This used to work in dojo 1.4 though.

Change History (11)

comment:1 Changed 5 years ago by ben hockey

Owner: set to joyceyu
Status: newpending

with the upgrades to the builder in 1.7, the path to "images" needs to be made known to the builder by adding it as a package so that it can be discovered.

packages: [
  'dojo',
  'dijit',
  'dojox',
  {
    name: 'images',
    location: '/path/to/images'
  }
]

does that fix the issue for you?

comment:2 Changed 5 years ago by joyceyu

Status: pendingnew

Thanks for the reply!

That seemed to work for the case where I only have 1 set of css and 1 set of images, but then for my environment I have 2 sets of css (one for each languages) and then I have a different set of image for each language so I need to define two image paths. In that case how should I define it?

I tried appending the locale to the "images" name but that didn't work. I also tried setting both paths to "images" but i'm not sure if the builder could figure out which maps to which?

Ex:
  {
    name: 'css-en',
    location: '/en/css'
  },
  {
    name: 'images-en',
    location: '/en/images'
  },
  {
    name: 'css-fr',
    location: '/fr/css'
  },
  {
    name: 'images-fr',
    location: '/fr/images'
  }
Last edited 5 years ago by joyceyu (previous) (diff)

comment:3 Changed 5 years ago by ben hockey

Status: newpending

i need more information.

in your application, how do you select which images are being shown? do you load different stylesheets for each language? do you load one stylesheet that will show different images depending on different selectors?

once i know the mechanism you use in your application to switch out the images then i can try to help you figure out the build.

comment:4 Changed 5 years ago by joyceyu

Status: pendingnew

I load different css for each language, so I have an english css and a french css. In each of these css, I have references to images that are language-dependent.

Although in most cases the relative image path used in the css is the same for both languages (ex: background: #000000 url("../../images/icon.png") no-repeat left 1px;), it is not guaranteed though, so I want to avoid pointing the package image path to either one.

comment:5 Changed 5 years ago by ben hockey

Resolution: invalid
Status: newclosed

the path to the images package is really not critical and has no significance to the builder except that you are letting it know that things you need can be found in that location - it could be a parent directory and it should all work. the thing to realize though is that the contents of that directory will be copied to the release of your build and relative paths to the images in your CSS files will be adjusted. because of this, the typical thing to do is to put your images nested inside the directory containing your CSS.

anyhow - i'm fairly sure there is no bug here, just a need to understand how to get the code working so i'm going to close the ticket.

comment:6 Changed 5 years ago by joyceyu

Are there any documentation on this? I've been searching all over but most tutorials don't go into the details of optimizing css. Thanks a lot

comment:7 Changed 5 years ago by joyceyu

Last edited 5 years ago by joyceyu (previous) (diff)

comment:8 Changed 5 years ago by joyceyu

You mentioned setting the package image path to the parent directory should work, so I tried the following but I got the same errors though. Is this what you mean by "parent directory"?

			{
					name: "css-en",
					location: "../assets/en/css"				
			},{
					name: "css-fr",
					location: "../assets/fr/css"				
			},{
			    name: 'images',
			    location: '../assets'
			}

The images folders are under assets/en/images and assets/fr/images

comment:9 Changed 5 years ago by ben hockey

you should try the mailing list or stackoverflow for help where someone can go into more depth and have a longer conversation with you. this ticketing system is for bugs.

comment:10 Changed 5 years ago by joyceyu

I tried the mailing list before this but nobody has provided any input even till now before I turned to this. I was trying to clarify the "parent directory" approach mentioned as that didn't seem to work, so I'm wondering if this is a bug or an unsupported flow. Thanks for the help.

comment:11 Changed 5 years ago by dylan

@joyceyu your original mailing list question was pretty vague. I saw it, and didn't respond as I didn't have time to sort through what was being asked. The ticket system should really be reserved for bugs, so now that you have more provided more information, I suggest moving the discussion back to the mailing list please. Thanks!

Note: See TracTickets for help on using tickets.