使用 webpack 在 sass 中添加“假”网址

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 的文件。

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

---

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

我鼓励你避免这种依赖。

今天的这种当前技术选择可能会减慢/破坏您的项目发展。

---

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

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

编辑：

直接的解决方案是将此功能提供到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;
}