Question

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

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

这要归功于webpack中的以下加载器：文件加载器，sass加载器，css加载器和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的文件。

具体来说，您希望使用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;
}

使用wepack在Sass中添加“假”网址

1 个答案: