要将图像添加到项目中,我在sass文件中使用content:url()css属性并指定src文件夹的相对路径,例如 content: url('/images/right-arrow.svg');
.
问题是在 生产环境 构建中我需要摆脱第一个斜杠,在捆绑的css文件中包含这样的路径 ('images/right-arrow.svg')
.
我可以获得所需行为的唯一方法是对 css-loader
使用 url: false
选项,并在sass文件中使用不带斜杠的路径: content: url('/images/right-arrow.svg')
,但是这样的选项不会从node_modules添加必要的文件,例如字体和图像 .
Webpack Config :
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配置中缺少什么来实现正确的工作路径?
2 回答
好的,我已经解决了这个问题 . 在@Ujin建议使用它之前,我使用resolve-url-loader没有结果 . 在他发表评论之后,我已经澄清了resolve-url-loader做了什么,并且为了解决我的问题而设计了它 . 主要问题是我错过了阅读resolve-url-loader文档的重要段落,其中说:
另外我没有使用resolve-url-loader插件的 root 选项 . 所以, .scss 文件的webpack配置如下所示:
检查documentation有关
url(...)
的问题 . 它建议使用resolve-url-loader .你也可以尝试使用copy-webpack-plugin