Мне нужно обновить старый проект и использовать WebPack 4. Цель - получить один CSS-файл в качестве выходного. Все это прекрасно работает, за исключением псевдоэлементов, в которых используется закодированное значение (например, content: "\ 2713";). css-loader меняет это на какой-то нечетный квадрат или реальный символ. Тем не менее, это ничего не нарушает визуально, и я все еще вижу значки, отображаемые правильно.
Я вижу, что причиной является загрузчик CSS. Если я оставлю версию такой, какой она была (0.28.7), ничего не произойдет с закодированными значениями содержимого. Но в настоящее время я использую одну из последних версий (~ 3.0.0).
SCSS
content: "\2713";
становится
CSS
content: "✓";
Или
SCSS
content: "\E608";
становится
CSS
content: "";
Это моя цепочка загрузчиков в WebPack
[
{
loader: 'file-loader',
options: {
name: "[path]/[name].css",
},
},
'extract-loader',
{
loader: "css-loader",
options: {
sourceMap: isDevelopment,
url: false
}
},
{
loader: "postcss-loader",
options: {
sourceMap: isDevelopment,
plugins: () => {
return [
require('autoprefixer')()
]
}
}
},
{
loader: "sass-loader",
options: {
sourceMap: isDevelopment,
implementation: require('sass')
}
}
]
Несмотря на то, что это визуально хорошо, я не понимаю, что здесь происходит. Почему css-loader меняет вывод здесь? Я не ожидал каких-либо изменений в выводе. Это связано с чем-нибудь UTF8?
И все-таки это проблема (потому что она все еще хорошо выглядит)?