Module Paths not Working with image-width, image-height, and image-size

[AlanBreck]

Hello,

First things first: thank you for writing this loader!

I'm having a slight issue, though. I'm trying to use image-width and image-height for an image in one of my moduleDirectories, however when doing so, I get the following error:

Module build failed: error evaluating function image-width: 'assets/images/qt-loader-white-80.gif' wasn't found. Tried - /Users/jacob_lamont/Quietyme/Website/frontend/lib/ui/lib/molecules/images/assets/images/qt-loader-white-80.gif,assets/images/qt-loader-white-80.gif

My LESS code looks like this:

@small-light-loader: "assets/images/qt-loader-white-80.gif"; // I also tried "~assets/images/..."
@small-dark-loader: "assets/images/qt-loader-gray-80.gif"; // I also tried "~assets/images/..."
@large-light-loader: "assets/images/qt-loader-white-200.gif"; // I also tried "~assets/images/..."
@large-dark-loader: "assets/images/qt-loader-gray-200.gif"; // I also tried "~assets/images/..."

.small-light {
    &:before {
        width: image-width( @small-light-loader );
        height: image-height( @small-light-loader );
        content: url( @small-light-loader );
    }
}

My webpack config looks like this:

var webpack = require( "webpack" );
var autoprefixer = require( "autoprefixer" );

module.exports = {

    context: __dirname,
    entry: [
        "webpack-dev-server/client?http://localhost:9999",
        "webpack/hot/only-dev-server",
        "./docs/App.jsx",
    ],
    output: {
        path: __dirname + "/dist",
        publicPath: "/",
        filename: "dist/bundle.js",
    },
    module: {
        loaders: [
            { test: /\.(js|jsx)$/, loader: "react-hot!babel", exclude: /node_modules/ },
            { test: /\.(less|css)$/, loaders: [
                "style?sourceMap",
                "css?modules&importLoaders=2&localIdentName=[name]__[local]___[hash:base64:5]",
                "postcss",
                "less"
            ], exclude: /node_modules/ },
            { test: /\.(woff\d?|eot|ttf|svg)$/, loader: "file" },
            { test: /\.(png|jpg|gif)$|images\/.*\.svg$/i, loader: 'url?limit=8192' },
        ],
    },
    postcss: function () {
        return [ autoprefixer, lessStyleguide ];
    },
    resolve: {
        extensions: [ "", ".js", ".jsx", ".json" ],
        modulesDirectories: [
            "node_modules",
            "lib",
        ],
        alias: {
            "qtGuide": __dirname + "/docs/src"
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

};

If I use a relative path, then it works just fine, but a relative path would defeat the purpose of using modulesDirectories.

Thanks, in advance, for any help on this!

P.S. This may be a duplicate of #85, but that issue doesn't seem as directly affected by using module paths.

[alexander-akait]

Problem was in css-loader and already solved, also i recommend use relative path like ./path/to/file.png