我正在使用Webpack捆绑我的模块,并在基于反应的应用程序中使用sass进行样式设置。
使用单独的样式表,我正在设置组件的背景图像并将该样式表加载到index.js
. 样式表中的所有样式都应用于该组件,除了背景图像。
这是我的示例样式表
$bg-img: url('/img/bg.jpg');
.show {
position: relative;
background: $black $bg-img center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
解决该问题的一种方法是明确要求图像,然后为反应组件创建内联样式。
img1 = document.createElement("img");
img1.src = require("./image.png");
但是我想在我的样式表加载后立即从我的图像文件夹中加载所有图像,而不是单独要求每个图像。
我的 webpack 配置文件是
module.exports = {
devtool: 'source-map',
entry: {
main: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
]
},
output: {
path: path.join(__dirname, 'public'),
publicPath: '/public/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'src'),
loader: 'react-hot!babel'
},
{
test: /\.scss$/,
include: path.join(__dirname, 'sass'),
loaders: ["style", "css?sourceMap", "sass?sourceMap"]
},
{
test: /\.(png|jpg)$/,
include: path.join(__dirname, 'img'),
loader: 'url-loader?limit=10000'
} // inline base64 URLs for <=10k images, direct URLs for the rest
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
我可能遗漏了一些琐碎的要点。任何帮助表示赞赏。