web-dev-qa-db-ja.com

Webpack-背景画像が読み込まれない

私はかなりwebpackに慣れていませんが、css-loaderまたはfile-loaderに問題があります。

背景画像を読み込もうとしていますが、うまくいきません。 devtoolsはbackground-imageスタイルを表示しますが、背景画像は表示されません。

background-imageスタイルをelement.styleブロックにコピーすると、すべて正常に動作します。私はどこかで愚かな間違いを犯していますか？

Bodyタグには背景画像が必要です。開発者ツールにスタイルが表示され、エラーはありません。

1

ファイル5a09e4424f2ccffb6a33915700f5cb12.jpgをロードできますが、本文には背景がありません。

DevToolsのelement.styleにcss行を手動でコピーして貼り付けると、すべてが機能します。

2

これは、webpack-dev-serverまたはwebpackを使用してChromeとFirefoxの両方でバンドルした場合に発生します。

body { background-color: red }などの他のスタイルは正常に機能します。

これはwebpack.config.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'
    }
};
webpackwebpack-dev-servercss-loader
24
Eric

現在、css-loaderでsourceMapを使用する際にバグがあります。 CSSローダーからsourceMapを削除すると修正されます。

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

問題は以下に関連しています： https://github.com/webpack/css-loader/issues/296

26
Sonny

ブラウザは、bodyタグの背景画像への相対パスを好まないようです。 （ CSSバックグラウンドイメージが読み込まれない および cssバックグラウンドイメージが正しく機能しない も参照）

コードを少し変更するだけでうまくいくようです。

  • uRLを絶対URL background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg)に変更します。これはほとんど理想的ではありません。
  • bodyにクラスを追加し、このクラスを参照するようにスタイルを変更します。
<body class="foo">

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

これらのどちらも本当の問題を解決するものではありませんが、行き詰まってしまいます。

3
robrich

1日この問題に苦労した後、私は最終的にpostcssを使用してCSS内のURLを書き換える方法を見つけました

webpack.config.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.config.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
James McGuigan

出力のpublicPathエントリはどこにありますか？例えば：

publicPath： ' http：// localhost：5000 / '、//ソースマップで動作するcss内の画像の絶対パス要件。 LANでアクセスするには、実際の数値IPである必要があります。

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

2
Dan Brown

Webpackはcssを生成し、<link> urlを介してblob:sします。これにより、背景画像の読み込みで問題が発生するようです。

開発回避策
開発中のファイルローダーを介して画像をインライン化します（cssに大きなbase64文字列を作成します）
しかし、ホットリロードは可能です。

生産回避策
CSSを通常のファイルとして提供するには、 ExtractTextPlugin を使用します。

2
Bob Fanger

以下を使用してみてください：

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;
}

webpackのcss-loader：

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

Bundle.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
Daniel Rocha