33

我对 webpack 还很陌生,但是 css-loader 或 file-loader 有一些问题。

我正在尝试加载背景图像,但它不能正常工作。即使 devtools 显示background-image样式,背景图像也不会显示。

background-image如果我将样式复制到element.style块中,一切正常。我在某个地方犯了一个愚蠢的错误吗?

body 标签应该有背景图片。该样式出现在开发者工具中并且没有错误:

1

我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg,但正文没有背景。

element.style如果我在 DevTools 中手动复制并粘贴 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'
    }
};
4

9 回答 9

29

将 sourceMap 与 css-loader 一起使用时,当前存在一个错误。从你的 css 加载器中删除 sourceMap 应该可以修复它。

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

问题与:https ://github.com/webpack/css-loader/issues/296

于 2016-07-05T00:51:26.683 回答
5

似乎浏览器不喜欢 body 标签上背景图像的相对路径。(另请参阅CSS 背景图像未加载css 背景图像无法正常工作

稍微更改代码似乎可以解决问题:

  • 将 URL 更改为绝对 URL background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg):。这并不理想。
  • 向 body 添加一个类,并更改样式以引用该类:
<body class="foo">

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

这些都不能解决真正的问题,但确实会让你摆脱困境。

于 2016-05-18T13:06:16.057 回答
3

在为这个问题苦苦挣扎了一天之后,我终于想出了如何使用 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/');
        })
    ]
};
于 2017-01-26T17:50:14.897 回答
3

几个小时后,我只是简单地降级css-loader

npm install css-loader@4.3.0
于 2021-11-02T21:28:41.893 回答
2

Webpack 生成 css 并<link>通过blob:urls 生成它们,这似乎会导致加载背景图像时出现问题。

开发解决方法
通过开发中的文件加载器内联图像(在 css 中创建大的 base64 字符串)
但允许热重新加载。

生产解决方法
使用ExtractTextPlugin将 css 作为普通文件提供。

于 2016-06-20T10:29:42.490 回答
2

输出中的 publicPath 条目在哪里?例如:

publicPath: ' http://localhost:5000/ ', // 这里的绝对路径要求 css 中的图像与 sourcemaps 一起使用。必须是实际的数字 ip 才能在 lan 上访问。

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

于 2016-07-06T18:06:02.857 回答
0

您也可以尝试~在文件前面使用 ,以便 webpack 回退到加载require器来解析 url。

background-url: (~assets/image/myimagefile);
于 2017-03-01T17:22:44.077 回答
0

请尝试使用,例如:

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}
于 2018-06-01T16:37:08.957 回答
-1

当在 react 中使用 img 时遇到问题,您必须检查您的目录结构,通常会出错调用指向父目录的路由。

例如:如果你有这个结构

-public
--images
---testImage.jpg -components
--home
---
index.js

如果您尝试在 index.js 中使用以下代码,它将失败:

{background : url('/public/images/testImage.jpg')}

但是如果您知道文件夹结构并使用下面代码中所示的 [../] 导航到外部文件夹,我认为它会像对我一样工作。

{background : url('../public/images/testImage.jpg')}

这个问题在使用相对路由时会发生很多次,在你的路由中尝试 [../] 直到你将自己定位在项目目录结构中的正确级别,然后使用正确的路由转到你想要的目录。

于 2020-04-07T20:38:21.603 回答