使用 webpack 在 sass 中添加 "fake" url

Question

在我的项目中，我有一些 scss 并且使用 webpack 我可以正确构建和捆绑所有内容。在我的 scss 文件中，我有一些 url 来获取一些图像。像那样:

background-image: url(../img/example.svg),

这要归功于 webpack 中的这些加载器：file-loader、sass-loader、css-loader 和 minicssextractplugin。这是工作的 webpack 配置：

{
    module: {
        rules: [
            {
                test: /\.s?[ac]ss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                    }
                ],
            },
            {
                test: /\.(svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            limit: 8192
                        },
                    }
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ]
}

我的问题是在输出文件夹 (dist) 中，我有所有图像（见树下方）。

dist
 |---- bundle.js
 |---- bundle.css
 |---- images
         |---- example.svg

我的想法是将 url 设置为伪造的 url，但我不希望 sass 解析 url 并加载图像。我只想按原样添加 url 并且不希望它检查给定的路径。你知道怎么可能吗？

Answer 1

据我了解，根据你的精确度，你有两个项目 child_project 和 root_project，这就是你的目标：

child_project                                 root_project
    dist                                           dist
    |-- bundle.js                                 |---- main.js
    |-- bundle.css <---- import -------------  |---- main.css
               |                                     |---- img
               |----------- use -------------------->   |----- example.svg

您想将 root_project 中的文件用于 child_project。

具体来说，您想要 child_project/dist/bundle.css 使用 root_project/dist/img/example.svg 文件的 background-image 属性。

您创建的路径依赖性会导致很多问题。

我鼓励你避免这种依赖。

今天的当前技术选择可能 slow/break 您的项目发展。

一种技术替代方案可能是在 child_project 中提供一些功能，让任何 root_project 设置特定的 url/theme。

这不是您问题的直接解决方案，而是试图帮助解决问题。

编辑：

一个直接的解决方案是将此功能提供到 child_project 模块中，root_project 可以从外部访问：

// Set background image for each element that match 'class_name' class
function set_class_background_image(class_name, url) {
    const elems = document.getElementsByClassName(class_name);
    elems.forEach(x => { x.style.background_image = url; });
}

// Set background image for the element that match 'id' id
function set_id_background_image(id, url) {
    const elem = document.getElementById(id);
    elem.style.background_image = url;
}

使用 webpack 在 sass 中添加 "fake" url

Add "fake" url in sass with wepack

webpack

sass

webpack-4

webpack-style-loader