javascript - 如何包含来自 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]'
            }

一块scss：

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

这是 包含完整配置的项目本身

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。