Webpack не загружает фоновое изображение

Я пытаюсь загрузить изображение:

background: transparent url("../img/select-icon.png") no-repeat center right 8px;

У меня style.scss так и не работает

Вот мой webpack.config:

function _path(p) {
  return path.join(__dirname, p);
}

module.exports = {

    context: __dirname,
    entry: [
        './assets/js/index'
    ], 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name].js'
    },

    devtool: 'inline-eval-cheap-source-map',

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        }),
        new HappyPack({
            id: 'jsx',
            threads: 4,
            loaders: ["babel-loader"]
        })

    ],

    module: {
        loaders: [
            {
                test: /\.css$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: "style-loader!css-loader"
            },

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: "style-loader!css-loader!sass-loader"
            },

            {
                test: /\.jsx?$/, 
                include: path.resolve(__dirname, './assets/js/'),
                exclude: /node_modules/, 
                loaders: ["happypack/loader?id=jsx"]
            },
            {
                test: /\.png$/,
                loader: 'file-loader'
            }
        ]
    },

    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx'],
        alias: {
          'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask'),
        }, 
    }   
}

Я использую загрузчик файлов, но URL-адрес, отображаемый в браузере, не совпадает с URL-адресом изображения.

Я думаю, что не использую исходную карту: https://github.com/webpack/style-loader/issues/55

Кто-нибудь может помочь?


webpack sass background-image sass-loader webpack-style-loader
person Alessander França    schedule 08.08.2016    source источник
comment
Можете ли вы опубликовать неверный URL-адрес в своем браузере?   -  person Quarter2Twelve    schedule 10.08.2016
comment
фон: прозрачный URL-адрес (96ab4c4434475d0d23b82bcfc87be595.png) без повторов по центру справа 8px; - Этот хэш указывает на localhost//app/contacts/form/add/1. /. Но я думаю, что это должно указывать на localhost/static/img/96ab4c4434475d0d23b82bcfc87be595.png   -  person Alessander França    schedule 10.08.2016

Ответы (2)


arrow_upward
3
arrow_downward

Чтобы преобразовать URL-адрес ('...') в выходной путь к файлу, вам нужно использовать resolve-url-loader перед css-loader.

В вашем webpack.config.js вам нужно внести следующие изменения:

//...
module: {
    loaders: [
        {
            test: /\.css$/,
            include: path.resolve(__dirname, './assets/css/'),
            loader: "style-loader!css-loader!resolve-url-loader"
        },

        {
            test: /\.scss$/,
            include: path.resolve(__dirname, './assets/css/'),
            loader: "style-loader!css-loader!resolve-url-loader!sass-loader"
        },
        //...
    ]
}
//...

В качестве дополнительной конфигурации вы можете указать шаблон имени файла, который использует file-loader. Таким образом, вместо 96ab4c4434475d0d‌​23b82bcfc87be595.png, например, вы можете иметь /img/select-icon.png.

В вашем webpack.config.js используются параметры по умолчанию file-loader. Это означает, что имя выходного файла использует шаблон [id].[ext]. Будучи [id] идентификатором фрагмента и [ext] расширением файла.

Для указания шаблона имени выходного файла необходимо передать параметр name в запрос загрузчика.

До этого момента require('../img/select-icon.png') должно возвращать '/img/select-icon.png'. resolve-url-loader будет использовать это значение.

//...
module: {
    loaders: [
        //...
        {
            test: /\.png$/,
            loader: 'file-loader',
            query: {
                name: 'img/[name].[ext]'
            }
        },
        //...
    ]
}
//...
person manyrdz    schedule 17.08.2016
comment
Это решило одну часть моей проблемы. Я использую бэкэнд django и реагирую как внешний интерфейс, тогда мой URL-адрес отображается: localhost/app/img/select-icon.png, но это должен быть localhost/static/img/select-icon.png. Могу ли я заменить приложение на статическое? - person Alessander França; 17.08.2016
comment
Я заменил «img/[name].[ext]» на «/static/img/[name].[ext]» и сработал. Спасибо =) - person Alessander França; 17.08.2016

arrow_upward
0
arrow_downward

Я использую стартовый пакет Angular Class, поэтому не знаю, есть ли у вас класс «помощников».

в webpack config/common добавьте вспомогательную константу.

const helpers = require('./helpers');

в пределах вашей решимости: добавить

root: helpers.root('src'),

и в загрузчиках добавить:

  {
    test: /\.html$/,
    loader: 'raw-loader',
    exclude: [helpers.root('src/index.html')]
  },

теперь измените загрузчик scss на этот

  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader']
  },

Теперь я не уверен, что вы все еще можете использовать «include.path». Я просто добавляю «активы» в URL-адрес, например «url ('./assets/img/whatever.png').

Надеюсь, что это поможет и удачи.

person cptnk    schedule 16.08.2016