css-loader URL root 不修改 url答案

【问题标题】：css-loader URL root not modifying urlcss-loader URL root 不修改 url
【发布时间】：2017-08-30 09:47:24
【问题描述】：

我的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 options documentation 上面写着：

但是，如果设置了根查询参数，则会将其添加到 URL 的前面，然后进行翻译。

如果我的 CSS 看起来像这样：

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

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

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

【问题讨论】：

标签： javascript webpack webpack-2

【解决方案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')，这实际上是资源所在的位置。但不会影响原来的url。

alias 中的键前面带有 ./ 是有原因的，因为它不能仅与 / 一起使用，我认为这是因为 css-loader 总是会在前面加上 @987654337在继续处理url 之前，@ 带有.。

然后{ root: '' } 被添加到它前面，所以我得到了我想要的输出：

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

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

【讨论】：

【解决方案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]',
                 }
             ]
           }
        ]
},

【讨论】：