Can I have a relative path in the result css file?

[sidgwick]

my file structure:

common
├── entry-common.js
└── scss
    ├── common.scss
    ├── images
    │   ├── bg_header_blog.jpg
    │   ├── bg_header.jpg
    │   ├── bg_header_services1.jpg
    │   └── bg_header_soft.jpg
    └── _variables.scss

I want the result in css file: url(./images/xxxx.jpg), but now I get: url(common/scss/images/xxxx.jpg). My file-loader : file?hash=sha512&digest=hex&context=src&name=[path]-[hash].[ext].

Is it possible to do this?

[bholloway]

What is your sass loader chain?

This loader allows feature based structures which you do not have. If all your images are in one directory you will get no benefit.

[sidgwick]

I use node-sass, sass-loader, css-loader and style-loader.

this is the loader configure:

test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!resolve-url!sass?sourceMap")

and here is my images loader:

  test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/i,
  loaders: [
    'file?hash=sha512&digest=hex&name=[path][hash].[ext]',
    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
  ]

[cevou]

Can you upload a project that is setup like described above? It is much easier to find out about a problem if its reproducible.

[bholloway]

I think it is a conceptual mismatch.

You want all your assets to appear in your output.

The url() path in output CSS should be to the output assets, not the source assets like you are suggesting.

The url() path in the source SASS should be to the source assets. If you want that to be relative, use this loader.

Am I misreading your question?

[sidgwick]

Sorry for my english. Here is a small project for my question:

.
├── package.json
├── src
│   ├── page_a
│   │   ├── common.js
│   │   ├── images
│   │   │   └── header-bg.jpg
│   │   └── scss
│   │       └── common.scss
│   └── page_b
│       ├── common.js
│       ├── images
│       │   └── header-bg.jpg
│       └── scss
│           └── common.scss
└── webpack.config.js

my output is like this:

dist
├── page_a
│   ├── common.css
│   ├── common.js
│   └── images
│       └── 6e85d4d9a49023fcbaa2757a5dbc0a81.jpg
└── page_b
    ├── common.css
    ├── common.js
    └── images
        └── 6e85d4d9a49023fcbaa2757a5dbc0a81.jpg

the source in my SASS is:

.head-block {
    background-image: url(../images/header-bg.jpg);
}

output is:

.head-block {
  background-image: url(page_a/images/6e85d4d9a49023fcbaa2757a5dbc0a81.jpg);
}

if i use the dist directory as my server root directory, this work well. but I want to use dist/page_a and dist/page_b as the root directory, so I want to know how to make the output like this:

.head-block {
  background-image: url(../images/6e85d4d9a49023fcbaa2757a5dbc0a81.jpg);
}

the below is my webpack.config.js

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    "page_a/common": './src/page_a/common',
    "page_b/common": './src/page_b/common',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.less', '.sass', '.scss', '.css']
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("style", "css!resolve-url")
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract("style", "css!resolve-url!sass?sourceMap")
    }, {
      test: /\.js$/,
      loader: 'babel',
      query: {
        presets: [
          "es2015",
          "react"
        ],
        compact: false
      }
    }, {
      test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/i,
      loaders: [
        'file?hash=sha512&digest=hex&context=src&name=[path][hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
      ]
    }]
  },
  plugins: [
    new ExtractTextPlugin("[name].css"),
  ]
};

[bholloway]

@sidgwick You need to use webpack publicPath option. This will solve the problem

You only have one .scss file so you don't need resolve-url-loader as far as I can see.

[sidgwick]

this is just a example. there are many scss files in my real project.

I make a repository for my example code: https://github.com/sidgwick/webpack-question.git

[sidgwick]

I think this is not a resolve-url-loader problem. the result return by this loader is a relative path, I will try some other way to solve this problem.

thanks all of you.