css-loader 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' 。

但是，这不是我要得到的，运行构建时没有任何变化。

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 ，它将交换/assets与path.resolve(__dirname, './resources/images') /assets path.resolve(__dirname, './resources/images') /assets path.resolve(__dirname, './resources/images') ，这实际上是资源所在的位置。 但这不会影响原始url 。

alias的键之前带有./的原因是有原因的，因为它不能仅与/而我认为这是因为css-loader将始终在/加上/ . 在继续处理url 。

然后{ root: '' }被添加到它的前面，因此我得到了所需的输出：

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

这对我来说似乎并不理想-也许只是因为我的工作流程略有不同！

Answer 2

尝试更改webpack配置文件。 并检查资产文件夹应出现在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]',
                 }
             ]
           }
        ]
},