Webpack无法加载背景图片 [英] Webpack not loading background image

问题描述

我正在尝试加载图像:

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

在我的style.scss上，它不起作用

At my style.scss and it is not working

这是我的webpack.config:

Here is my 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不匹配.

I am using file-loader but the url rendered at browser does not match with the url of the image.

我认为我没有使用源地图: https://github.com/webpack/style-loader/issues/55

I think that I not using source map: https://github.com/webpack/style-loader/issues/55

任何人都可以帮忙吗?

推荐答案

要将URL('...')解析为文件输出路径，您需要在css-loader之前使用resolve-url-loader.

To resolve the url('...') to the file output path you need to use resolve-url-loader before the css-loader.

在您的webpack.config.js中，您需要进行以下更改:

In your webpack.config.js you need to make the following changes:

//...
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使用的文件名模板.因此，可以不用/img/select-icon.png，而可以使用/img/select-icon.png.

---

As an optional configuration, you can specify the filename template that the file-loader uses. So instead of having 96ab4c4434475d0d‌​23b82bcfc87be595.png for instance, you can have /img/select-icon.png.

在webpack.config.js中，正在使用file-loader的默认选项.这意味着输出文件名正在使用模板[id].[ext]. [id]块ID和[ext]文件扩展名.

In your webpack.config.js the default options of the file-loader are being used. This means that the output filename is using the template [id].[ext]. Being [id] the chunk id and [ext] the extension of the file.

要指定输出文件名模板，您需要将name参数传递给加载程序的查询.

To specify the output filename template you need to pass the name parameter to the query of the loader.

到目前为止，require('../img/select-icon.png')应该返回'/img/select-icon.png'. resolve-url-loader将使用此值.

Up to this point, require('../img/select-icon.png') should return '/img/select-icon.png'. The resolve-url-loader will use this value.

//...
module: {
    loaders: [
        //...
        {
            test: /\.png$/,
            loader: 'file-loader',
            query: {
                name: 'img/[name].[ext]'
            }
        },
        //...
    ]
}
//...

这篇关于Webpack无法加载背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！