У меня есть проект, в котором я использую шаблон ReactTS из DotNet.Я установил SCSS и все работает, кроме фонов.
Изображения и scss
скомпилированы в папку dist (scss
в файле style.css).Все изображения скомпилированы правильно и могут вызываться с использованием обычного CSS, но проблема заключается в scss
, так как url()
также содержит dist
перед фактическим URL, в то время как сам файл CSS уже находится в dist
папка.Это означает, что CSS ищет изображение внутри /dist/dist/{image}.png}
вместо /dist/{image}.png}
.
Поскольку я не могу просто отредактировать файл dist/style.css
напрямую, как я могу убедиться, что путь будетправильный?
Редактировать: После изменения URL в инспекторе, я могу подтвердить, что /dist/{image}.png}
действительно будет работать.Проблема в том, что внутри css он background-image: url('dist/{image}.png)
, где он должен быть только url('{image}.png
.Это внутри файла css
, который создается в папке dist
.
Редактировать 2:
Uncompiled site.scss
html {
background-image: url('../img/backgrounds/background1.jpg');
background-size: cover;
...
}
Скомпилированный style.css
html {
background-image: url(dist/fc5316d2f76725be344cc36eb98c28f7.jpg);
background-size: cover;
}
Структура папок
├───ClientApp
│ ├───css
| | └───site.scss
| └───img
| └───background1.jpg
└───wwwroot
└───dist
├───style.css
└───fc5316d2f76725be344cc36eb98c28f7.jpg
Редактировать 3:
webpack.config.js
...
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
module: {
rules: [
...
{ test: /\.s?css$/, include: /ClientApp/, use: ExtractTextPlugin.extract({ use: ['css-loader', 'sass-loader'] }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader?limit=25000' }
]
},
plugins: [
...
new ExtractTextPlugin({
filename: 'style.css'
})
]
...