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 options documentation：

但是，如果设置了根查询参数，则它将被添加到URL之前，然后进行翻译。

如果我的CSS如此：

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

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

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

Answer 1

因此，为了使其正常工作，我需要确保设置{ url: true }或者忽略该密钥，因为它默认为true。

但是后来因为我通过我在css中设置的file-loader拉出我的资产资产之后的相对网址被移动了：

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

这会带来一个新问题，{ url: true }这意味着css-loader会尝试解决它 - 但它不会因为文件不存在而存在...... ..

所以我也必须像{a}那样使用{ 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之前，{1}}始终会预先/ .。

然后url被添加到前面，所以我得到了我想要的输出：

{ root: '' }

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

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]',
                 }
             ]
           }
        ]
},

css-loader URL root不修改url

2 个答案: