Webpack-фоновые изображения не загружаются

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



Я пытаюсь загрузить фоновое изображение, но оно работает не совсем правильно. Фоновое изображение не отображается, хотя devtools показывают стиль background-image.

Если я копирую стиль background-image в блок element.style, все работает нормально. Может, я где-то совершаю глупую ошибку?



Тег body должен иметь фоновое изображение. Стиль появляется в инструментах разработчика и отсутствует ошибки:

Один



Я могу загрузить файл 5a09e4424f2ccffb6a33915700f5cb12.jpg, но тело не имеет фона.



Если я вручную копирую и вставляю строку css в element.style в DevTools, все работает:



Два



Это происходит, если я связываю с помощью webpack-dev-server или Просто webpack и в Chrome и Firefox.



Другие стили, такие как body { background-color: red } прекрасно работают.



Это веб-пакет.конфиг.js: 



const path = require('path');



module.exports = {

    "entry": [

        './src/index.js'

    ],

    "output": {

        "path": path.join(__dirname, 'build'),

        "filename": "bundle.js"

    },

    devtool: "source-map",

    "module": {

        "loaders": [

            {

                "test": /.scss$/,

                "loaders": ["style", "css?sourceMap", "sass?sourceMap"]

            },

            { 

                test: /.jpg$/, 

                loader: "file-loader" 

            }

        ]

    },

    devServer: {

        contentBase: './build'

    }

};
832   7  

7 ответов:

В настоящее время существует ошибка при использовании sourceMap с css-загрузчиком. Удаление sourceMap из вашего загрузчика css должно исправить это.

"module": {
    "loaders": [
        {
            "test": /\.scss$/,
            "loaders": ["style", "css", "sass?sourceMap"]
        },
        { 
            test: /\.jpg$/, 
            loader: "file-loader" 
        }
    ]
}

Проблема связана с: https://github.com/webpack/css-loader/issues/296

26  
2016-07-05 03:51:26

После борьбы с этой проблемой в течение дня, я, наконец, понял, как переписать URL-адреса в css с помощью postcss

Веб-пакет.конфиг.js 

const _ = require('lodash');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const argv = {
    verbose:    _.includes(process.argv, '-v') || _.includes(process.argv, '--verbose'),
    json:       _.includes(process.argv, '--json'),
    production: _.includes(process.argv, '--production'),
};
module.exports = {
    cache:   true,
    devtool: argv.production ? "source-maps" : "eval",
    output: {
        path: 'public/build',
        filename: '[name].js',
        publicPath: "/build/",
        pathinfo: true // use with devtool: "eval",
    },
    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ].join('!')
            },
            {
                test: /\.css$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ].join('!')
            },
        ]
    }
}

Postcss.конфиг.js 

const argv = {
    verbose:    _.includes(process.argv, '-v') || _.includes(process.argv, '--verbose'),
    json:       _.includes(process.argv, '--json'),
    production: _.includes(process.argv, '--production'),
};
module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: [
                "> 5%",            // https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
                "last 2 versions", // http://caniuse.com/
            ]
        }),
        require('postcss-url-mapper')(function(url) {
            return argv.production ? url : url.replace(new RegExp('^/'), 'http://localhost:3000/');
        })
    ]
};
3  
2017-01-26 19:50:14

Похоже, браузеры не любят относительные пути к фоновым изображениям на теге body. (Смотрите также CSS фоновое изображение не загружается и CSS фоновое изображение не работает должным образом)

Небольшое изменение кода, казалось, сделало свое дело:

  • измените URL на абсолютный URL: background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg). Вряд ли это идеальный вариант.
  • добавьте класс в тело и измените стили, чтобы ссылаться на этот класс: 
<body class="foo">

.foo {
    background-image: url('../img/test.jpg');
}

Ни один из них не решает реального вопрос, но все же раскрепоститесь.

2  
2017-05-23 15:34:50

Webpack генерирует css и <link>s их через blob: url, что, по-видимому, вызывает проблемы с загрузкой фоновых изображений.

Разработка обходного пути
Inline изображения через файл-загрузчик в разработке (создает большую строку base64 в css)
Но допускает горячую перегрузку.

Производственный обходной путь
Используйте Extractextplugin для обслуживания css как обычного файла.

2  
2016-06-20 13:29:42

Где находится запись publicPath в выводе? например:

PublicPath: 'http://localhost:5000/', // абсолютный путь req здесь для изображений в css для работы с исходными картами. Должен быть действительный числовой ip-адрес для доступа по локальной сети.

Https://github.com/webpack/docs/wiki/configuration#outputpublicpath

2  
2016-07-06 21:06:02

Попробуйте использовать, например: 

html {
   background: url(~/Public/img/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Css-загрузчик в webpack: 

{
    test: /\.(css|eot|svg|ttf|woff|jpg|png)$/i,
    use: ExtractTextPlugin.extract({
        use: [{
            loader: 'css-loader',
            options: {
                importLoaders: 1,
                minimize: true
            },
        }],
    }),
},

Результат в связке.css-это: 

html{background:url(/Public/img/bg-picking.jpg) no-repeat 50% fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
0  
2018-06-01 19:49:16

Вы также можете попробовать использовать ~ перед вашими файлами, чтобы веб-пакет возвращался к загрузчикам require для разрешения url.

background-url: (~assets/image/myimagefile);
-1  
2017-03-01 19:22:44

Comments

    Ничего не найдено.
Click here to cancel reply.