Я новичок в реакции, и я пытаюсь установить фоновое изображение с помощью scss в реакции.Тем не менее, я получаю сообщение об ошибке в веб-пакете:
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss
Module not found: Error: Can't resolve '../../images/simon-rae-732820-unsplash.jpg' in 'D:\TravelPlannr\src\styles'
@ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 7:735-788
@ ./src/styles/styles.scss
@ ./src/app.js
@ multi (webpack)-dev-server/client?http://localhost:8585 ./src/app.js
Ниже приведен файл конфигурации для веб-пакета:
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: 'images/[hash]-[name].[ext]'
}
}]
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 8585,
historyApiFallback: true
}
};
Ниже приведен аналог scss:
.header-container{
height: 85%;
background-image: url('../../images/simon-rae-732820-unsplash.jpg')
}
Я часами искал решение, но ничего не помогло.
Пожалуйста, помогите.Заранее спасибо!