Файлы CSS в Devtool-Inspector не чистые ⇐ Javascript

[Anonymous]

css -файлы в инспекторе Devtools содержат JavaScript и появляются дублированные
Я сталкиваюсь с странной проблемой в Chrome Devtools (инспектор) во время отладки моего проекта. Файлы CSS не являются чистыми - многие из них содержат код JavaScript внутри, и некоторые файлы CSS, по -видимому, дублируются с еще большим количеством JavaScript, введенным в них. < /strong> < /h4>

[*] Проверьте фактические исходные файлы в моем каталоге проекта → они содержат только действительные CSS. < /li>
Отключили Все расширения браузера → Проблема сохраняется. Изучил вкладку сети в Devtools → Файлы CSS, по -видимому, запрашиваются правильно, но на вкладке они содержат код JavaScript.
[*] Посмотрите для преобразования WebPack или Vite, которые могут возникнуть в этой проблеме, но я не нашел ничего подозрительного. >

Frontend: React.js (с Vite/Webpack в качестве Bundler)
[*] Бэкэнд: java ee 10 (обслуживание статических активов)
Dev Environment: Chrome (последний), Windows/linux
< /ul>
Вопросы: < /strong> < /h4>

Почему мои файлы CSS в Инспектор Devtools содержит JavaScript? < /Li>
Почему файлы CSS дублируются с еще большим JavaScript внутри? WebPack, Vite или Server-Transuments)? /> Devtool Inspector < /p>
import webpack from 'webpack';
import path from 'path';
import HtmlPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin'

export default {
entry: './src/index.tsx',
output: {
filename: '[name].[contenthash].js',
path: path.resolve('build'),
clean: true,
publicPath: '/'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
type: "asset",
},
{
test: /\.(js|mjs|jsx|ts|tsx|css)$/,
use: ['source-map-loader']
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
devServer: {
hot: true,
port: 3000,
open: true,
historyApiFallback: true,
proxy: [
{
context: ['/service'],
target: 'http://localhost:8080',
},
],
},
plugins: [
new HtmlPlugin({
template: 'public/index.html',
filename: 'index.html'
}),
new CopyWebpackPlugin({
patterns: [
{from: 'public/assets', to: 'assets'},
],
}),
new webpack.DefinePlugin({
"process.env.PUBLIC_URL": JSON.stringify("/"),
})
]
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... -not-clean