Css-loader: Resolving url(...) from output folder instead of source folder

[ghost]

Hello,

I am trying to have scss files that compile with both webpack (for build) and gulp (for dev). Everything is working well, except how the url()s are resolved.

Project structure in the public folder:

• bundle
• src
  
  
  
  • scss
  
  
  • lib/ionic/release/fonts
  
  

The URLs injected in url(...) are defined by a scss variable:

// Relative to scss folder - works with webpack
$ionicons-font-path: "../lib/ionic/release/fonts" !default;
// Relative to bundle folder - works with gulp
$ionicons-font-path: "../src/lib/ionic/release/fonts" !default;

// Include all of Ionic
@import "../lib/ionic/scss/ionic";
// ...

• gulp behavior: replace the variable and keep the value as-is: we have to write the URL relative to the output (bundle) folder (the browser is resolving the path from the css file).
• webpack behavior: resolve the URL relative to the source (scss) folder (like a require()) and add it to the bundle with a hash...

Which is not consistent.

Correct me if I'm wrong, but it seems that css-loader is responsible of loading the url() and resolving (@import and url(...) are interpreted like require() and will be resolved by the css-loader.). I was looking for an option to set the root folder to resolve the URLs, but I couldn't find it.

Using the tilde (~) to resolve as a module is not an option since it does not work outside webpack (with gulp).

Any idea about how I could solve this?

Thanks for reading this!

[ghost]

I found a gulp configuration to do something equivalent, that allows these 2 configurations to be compatible: gulp-rework with rework-plugin-url and URIjs.

I use 2 paths: one to the output css folder, another to the fonts folder (I take the path in url(...), initially for webpack, and prepend the path to the scss folder), then use URIjs.relativeTo() to get the final relative path, from the output css to the fonts. The lib is removing the useless parts of the URL (ex: ./scss/../). It also works if the scss folder is outside www.

So my gulp task becomes:

gulp.task('sass', function (done) {
    gulp.src('./www/scss/ionic.app.scss')
        .pipe(sass({
            errLogToConsole: true
        }))
        // The URLs in url(...) found in scss files are initially relatives to the scss folder (src/scss).
        // We modify them to be relative to the bundle folder (where the output css file is).
        .pipe(rework(reworkUrl(function (url) {
            return URI('/www/scss/' + url)
                .relativeTo('/www/bundle/'); // returns ../src/lib/ionic/release/fonts
        })))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename('styles.css'))
        .pipe(gulp.dest('./www/bundle/'))
        .on('end', done);
});

So allowing a way to change the folder used to resolve URLs with css-loader is not a requirement any more. The remaining question is more philosophical. Independenty of webpack/gulp, ideally, should the url(...)s in scss files be relative to the source scss files, or to the output css file?

[d3viant0ne]

Issues are for feature requests & bugs. All support requests / questions should be done in either the Webpack Gitter or in Stack Overflow w/ the webpack tag

[antoineol]

It is actually a request, probably not expressed well, that can be reworded to: "Please add an option to set the base URL to resolve imports when using relative paths."

The default is to resolve relative to the current CSS file path (source), but I needed to resolve as the browser and gulp do: relatively to the target bundled CSS.

The second post is for whoever reads and has the same need, showing another approach to the problem by changing the gulp tasks, to align with css-loader behavior.