如何包含来自 CSS 的图像（背景等）以使用 webpack 构建文件夹？

Question

我正在尝试使用文件加载器来处理图像并将它们包含到我的构建文件夹中。

html 文件中的图像出现在构建中，但样式中的图像不出现。

我将我的 webpack 配置分成 2 个文件，并使用 webpack 合并模块合并它们。

这是我配置 css 处理的方式：

exports.loadCSS = function (paths) {
    return {
        module: {
            rules: [{
                test: /\.scss$/,
                include: paths.app,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            root: paths.root
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            }]
        }
    };
};

这是文件加载器配置：

            {
                test: /\.(jpg|png|svg)$/,
                loader: 'file-loader?name=[path][name].[hash].[ext]'
            }

张css:

.img-from-styles {
  width: 100px;
  height: 100px;
  background: url('/imgs/imgInStyles.jpg');
}

这是 project 本身包含的完整配置

Answer 1

您需要使用url-loader 安装它

npm install url-loader --save-dev

如何使用

{
    test: /\.(png|jpg|jpeg|gif)$/,
    loader: 'url-loader?limit=10000'
 }

现在 webpack 将能够从您的样式中解析您的 url

更新

Webpack (css-loader) 需要准确的文件路径，以便它可以为您解析文件或 url。

如何包含来自 CSS 的图像（背景等）以使用 webpack 构建文件夹？

How to include images from CSS (backgrounds and etc.) to build folder using webpack?

javascript

webpack

webpack-file-loader