在sass中加上“假”url和wepack。

Question

在我的项目中，我有一些scss，与webpack一起，我可以正确地构建和捆绑一切。在我的scss文件中，我有一些url来获取一些图像。像这样：

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

这要归功于webpack的这些装载机:文件加载器、sass加载程序、css加载程序和minicss提取插件。下面是工作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'
        })
    ]
}

我的问题是，在output文件夹(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的文件。

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

您正在创建的路径依赖将导致许多问题。

我鼓励你避免这种依赖。

当前的技术选择可能会减缓/破坏项目的发展。

一种技术选择可以是在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;
}