gpt4 book ai didi

reactjs - Webpack 不会为生产 css 文件中的图像创建正确的路径

转载 作者:行者123 更新时间:2023-12-02 00:26:52 25 4
gpt4 key购买 nike

为了将图像添加到项目中,我在 sass 文件中使用 content: url() css 属性并指定 src 文件夹的相对路径,例如content: url('/images/right-arrow.svg'); .

问题是在生产构建中我需要去掉第一个斜杠才能有这样的路径 ('images/right-arrow.svg')在捆绑的 css 文件中。

我可以获得所需行为的唯一方法是使用 url: false css-loader 的选项,并在 sass 文件中写入不带斜杠的路径:content: url('/images/right-arrow.svg') ,但是这样的选项不会从 node_modules 添加必要的文件,例如字体和图像。

Webpack 配置:

return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public/'),
filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},

{
test: /\.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
},
'sass-loader'
]
},

{
test: /\.(svg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images'
}

}
},

{
test: /\.(otf|woff2|ttf|eot|woff)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
}

]
}

我在 webpack 配置中缺少什么来实现正确的工作路径?

最佳答案

好的,我已经解决了这个问题。我用的是 resolve-url-loader没有结果,在@Ujin 建议使用它之前。在他发表评论后,我澄清了什么 resolve-url-loader并正确配置它来解决我的问题。主要问题是我错过了阅读 resolve-url-loader 文档的重要段落,其中说:

source-maps required for loaders preceding resolve-url-loader (regardless of devtool).

我也没有使用 resolve-url-loader 插件的 root 选项。因此,.scss 文件的 webpack 配置如下所示:

      test: /\.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'resolve-url-loader',
options: {
root: path.join(__dirname, 'src')
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}

关于reactjs - Webpack 不会为生产 css 文件中的图像创建正确的路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53450528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com