CSS加载器的URL根路径未修改URL

Question

我有一个像这样的webpack.config文件：

module: {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: { loader: 'css-loader', options: { url: false, root: 'http://localhost:9000/' } }
            }),
            exclude: /node_modules/
        }
    ]
},

阅读css-loader选项文档，其中写到:

如果设置了根查询参数，则将其添加到URL之前并进行翻译。

如果我的css如下所示:

select-page {
    background-image: url('assets/background.png') !important;
}

我希望输出的url是'http://localhost/9000/assets/background.png'。

然而，实际上我得到的并不是这样的结果，在运行构建时没有任何变化。

- Callum Linington

Answer 1

为了让这个工作正常，我需要确保设置 { url: true } 或者省略该键因为它默认为 true。

但是，因为我通过 file-loader 来拉取我的资源，所以在 css 中，我需要在资源被移动之后设置相对 url：

.select-page {
    background-image: url('/assets/background.png') !important;
}

这带来了一个新的问题，使用 { url: true } 选项意味着 css-loader 将尝试解析它 - 但无法解析因为文件不存在于该位置.....

因此，我还必须像这样使用 { alias: {} }：

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: { 
            loader: 'css-loader', 
            options: { 
                root: 'http://localhost:8080/',
                alias: {
                    './assets': path.resolve(__dirname, './resources/images')
                }
            } 
        }
    }),
    exclude: /node_modules/
}

这意味着当 css-loader 尝试解析 url 时，它将使用 path.resolve（__ dirname，'./ resources / images'）替换 / assets ，实际上资源位于其中。但它不会影响原始的 url 。

在 alias 中键前面加上 ./ 是有原因的，因为仅使用 / 无法正常工作。我认为这是因为 css-loader 始终会在继续处理 url 之前在 / 前添加一个.。

然后将其添加到{ root：'' }，以便获得所需的输出：

.select-page {
    background-image:url("http://localhost:8080/assets/background.png")
}

对我来说，这似乎不是理想的情况 - 可能只是因为我的工作流程略有不同！

- Callum Linington

Answer 2

尝试更改webpack配置文件。并检查assets文件夹是否位于src文件夹下。

select-page {
    background-image: url('assets/background.png') !important;
}

module: {
    rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
            },
           {
             test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
             use: [
                 {
                    loader: 'file-loader?name=assets/[name].[ext]',
                 }
             ]
           }
        ]
},

- Vignesh