Почему url-loader не конвертирует в base64?

Question

[Владислав Калмыков]

Здравствуйте!

Пытаюсь сделать конвертацию картинок в base64 в css, scss файлах с помощью url-loader.
Конфиг вебпака выглядит следующим образом:

const path = require('path');

const webpack            = require('webpack');
const ExtractTextPlugin  = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin  = require('copy-webpack-plugin');

const root       = '.';
const assets     = `${root}/assets`;
const cssDevPath = `${assets}/css`;
const jsSrcPath  = `${assets}/src`;
const imgDevPath = `${assets}/img`;
const cssPath    = `${root}/css`;
const fontsPath  = `${root}/fonts`;
const imgPath    = `${root}/img`;
const jsDistPath = `${root}/js`;

const extractCSS = new ExtractTextPlugin(`${cssPath}/style.css`);

module.exports = {
    entry: [`${cssDevPath}/style.css`],
    output: {
        filename: `${jsDistPath}/bundle.js`,
        path: path.resolve(__dirname),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    use: [
                        {loader: 'css-loader'}
                    ],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(png|gif|jpg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000000
                    }
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin([`${jsDistPath}/*`, `${cssPath}/*`, `${imgPath}/*`, `${fontsPath}/*`]),
        extractCSS,
        new webpack.optimize.OccurrenceOrderPlugin(),
        new CopyWebpackPlugin([
            {from: imgDevPath, to: imgPath},
        ]),
    ],
};

Файл стилей по пути /assets/css/style.css выглядит следующим образом:

.icon {
    width: 67px;
    height: 58px;
    background-position: center center;
    background-repeat: no-repeat;
}

.icon--1 {
    background-image: url(/img/events.png);
}

.icon--2 {
    background-image: url(/img/exp.png);
}

.icon--3 {
    background-image: url(/img/heart.png);
}

.icon--4 {
    background-image: url(/img/projects.png);
}

.icon--5 {
    background-image: url(/img/talking.png);
}

.icon--6 {
    background-image: url(/img/team.png);
}

После выполнения команды webpack у меня получается выходной css-файл аналогичный входному. Никаких преобразований в base64 (размер каждого изображения, примерно, 4 Кб, что явно меньше указанного лимита в опциях).

Подскажите, пожалуйста, в чем может быть ошибка?
Может на что-то не обратил внимание в документации?

Answer 1

[Владислав Калмыков]

После некоторых экспериментов удалось получить желаемый результат, но возникли другие вопросы.

Но сначала, что получилось.
Файл стилей и картинки лежали в каталогах /assets/css/, /assets/img/.
Как указано в конфиге вебпака, картинки копировались на уровень выше, то есть в каталог /img/.
Файл стилей, указанный во входной точке, проходя через правила, попадал из /assets/css/ в каталог /css/.

Потому в самом файле style.css и были прописаны указанные в листинге пути к изображениям.

Но конвертация в base64 не проходила. А вот если сделать путь относительным, а не абсолютным, то конвертация проходила. Когда заменил url(/img/events.png) на url(../img/events.png), то все заработало.

Собственно, теперь интересует:
1) Почему необходимо задавать относительный путь?
2) Можно ли как-то сказать вебпаку обрабатывать абсолютные пути в url()?
3) Как быть тогда с путями, например, в bootstrap scss файлах, где путь к шрифту или изображениям задается как: url(bootstrap/<путь>) ?