Relative paths should start from file location, not project root

[ericorruption]

Hello,

I'm having an issue with relative paths. In a SCSS partial i'm declaring a background-image as url(../img/bg.jpg), however the plugin searches for this file at the root of the project (/Users/user/Sites/code/project-folder), not relative to the stylesheet path (should be /Users/user/Sites/code/project-folder/src/css - where my CSS is).

Stack trace is as follows:

message: 'ENOENT, no such file or directory \'/Users/user/Sites/code/img/bg.jpg\'',
stack: 'Error: ENOENT, no such file or directory \'/Users/user/Sites/code/img/bg.jpg\'
    at Error (native)
    at Object.fs.openSync (fs.js:500:18)
    at syncFileToBuffer (/Users/user/Sites/code/project-folder/node_modules/cssgrace/node_modules/image-size/lib/index.js:58:23)
    at module.exports (/Users/user/Sites/code/project-folder/node_modules/cssgrace/node_modules/image-size/lib/index.js:100:18)
    at imageSetMixin (/Users/user/Sites/code/project-folder/node_modules/cssgrace/lib/index.js:423:9)
    at /Users/user/Sites/code/project-folder/node_modules/cssgrace/lib/index.js:477:5
    at /Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:88:34
    at /Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:73:26
    at Rule.each (/Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:59:22)
    at Rule.walk (/Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:72:21)'

[jglover]

I've also run into this issue, the code looks like it has an option called opts.from but I don't know how to pass that in to the postcss CLI?

[ghost]

+1 Also having this problem

[machwatt]

+1

[yuezk]

I think this issue have been fixed in the new version 3.x, I changed the path resolve in the PR #39. Related code is here.

[ericorruption]

Resolved indeed.

[DotCoyote]

Nope, sincerely not, now it uses the path from the source-file:

/ css
/ img
  | image.png
/ src
  / scss
    | style.scss

style.scss:

.foo {
  background-image: url("../img/image.png");
}

Error: ENOENT: no such file or directory, open '/project/src/img/image.png'

[yuezk]

@CinKon , your source file is located in src/scss, and your built css is located in css folder. And now the plugin resolved path is relative to the source file path, so there should have a img folder under the src folder. I know your situation, and I think you should use some assets rebase plugins to handle this.

[PFanz]

+1 如果地址是非本地地址会报错