Webpack SCSS 图像 URL 嵌套路由上的链接断开
Webpack SCSS Image URL Links Broken on Nested Routes
这是我的目录结构:
- 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;
}
加载单级路由时,我的图像 link 可以正常工作。
例如在 /search
图像 link 被渲染为 url(images/img-75fa3d.png)
并且有效。
但是,如果我转到嵌套路由(通过 React Router),例如/properties/1
图片 link 相同,无法找到正确的图片位置,因为它是亲戚 link: url(images/img-75fa3d.png)
.
此示例中的图像是 logo-b-green.png
。
编辑:
我将 publicPath
添加到 output
部分并且它起作用了,现在 url 进入根目录。有人可以确认这是处理此问题的正确方法吗?
output: {
path: './public',
filename: 'bundle.js',
publicPath: '/'
}, ...
我将 publicPath
添加到 output
部分并且它起作用了,现在 url 变成了根。
output: {
path: './public',
filename: 'bundle.js',
publicPath: '/'
}, ...
这是我的目录结构:
- 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;
}
加载单级路由时,我的图像 link 可以正常工作。
例如在 /search
图像 link 被渲染为 url(images/img-75fa3d.png)
并且有效。
但是,如果我转到嵌套路由(通过 React Router),例如/properties/1
图片 link 相同,无法找到正确的图片位置,因为它是亲戚 link: url(images/img-75fa3d.png)
.
此示例中的图像是 logo-b-green.png
。
编辑:
我将 publicPath
添加到 output
部分并且它起作用了,现在 url 进入根目录。有人可以确认这是处理此问题的正确方法吗?
output: {
path: './public',
filename: 'bundle.js',
publicPath: '/'
}, ...
我将 publicPath
添加到 output
部分并且它起作用了,现在 url 变成了根。
output: {
path: './public',
filename: 'bundle.js',
publicPath: '/'
}, ...