6
这里的WebPack SCSS图片的URL链接是我的目录结构:上破嵌套路线
- public
- src
- app.js
- assets
- images
- logo-b-green.png
- stylesheets
- nav.scss
和:
// webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: './public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=fonts/[name].[ext]'
},
{
test: /\.(png|jpg|gif)$/,
loader: "file-loader?name=images/img-[hash:6].[ext]"
}
]
},
resolve: {
extensions: ['', '.js', '.json']
}
};
和:
/* nav.scss */
#nav-logo {
height: 26px;
width: 26px;
background-size: 100%;
background-image: url('../images/logo-b-green.png');
float: left;
margin: 16px 0 0 23px;
}
当装载单一级别路线我的形象链接正常工作。
例如在/search
图像链接被呈现为url(images/img-75fa3d.png)
并且工作。但是,如果我去一个嵌套路由(通过React路由器),例如, /properties/1
图片链接相同,因为它是相对链接:url(images/img-75fa3d.png)
,因此无法找到正确的图片位置。
该示例中的图像是logo-b-green.png
。
编辑:
我加入了publicPath
到output
部分和它的工作,现在的URL去根。有人可以确认这是处理这个问题的正确方法吗?
output: {
path: './public',
filename: 'bundle.js',
publicPath: '/'
}, ...
我打算建议设置'publicPath',所以是的。 AFAIK,它用于将URL的前缀添加到资源。 – robertklep