Невозможно прочитать файл css, загруженный в корзину S3 с помощью Node.js

У меня есть приложение Node.js, предназначенное для загрузки файла css на S3 для использования на моем веб-сайте. Кажется, все работает нормально, но когда я обращаюсь к файлу на своем веб-сайте, ни одно из изменений css не применяется. Я даже вижу файл css в разделе «Инструменты/источники разработчика». Однако css в этом файле не действует. Если я внесу какие-либо изменения в файл в инструментах разработки, css сразу начнет работать. Если я скачаю файл с s3, а затем перезалью его вручную, ничего не меняя, это тоже сработает. Так что что-то, связанное с форматированием, когда я добавляю файл с Node.js, отбрасывает его. Любая помощь в этом будет принята с благодарностью.

 let globalStyles = `.header-background{background-color:${themeStyles['headerBackground']};}

//using this to remove backticks from globalStyles
        globalStyles = globalStyles.replace(/^`|`$/g, '');

        await addFileCssS3(css, `${newUrl}/global.css`, newUrl);

const addFileCssS3 = async (file, key, newUrl) => {

    await s3
        .putObject({
            Body: file,
            Bucket: BucketName,
            Key: key,
            ContentType: 'text/css',
        })
        .promise()
        .catch((error) => {
            console.error(error)
        })
}

Подсветка синтаксиса в коде предполагает, что в приведенном здесь коде есть опечатка. Кроме того, почему в ваших правилах CSS должны быть обратные ссылки, и зачем вам тогда нужно их удалять?

miken32 13.01.2023 23:56

Нет ответа, поэтому голосование за закрытие неясно.

miken32 18.01.2023 05:24
Laravel с Turbo JS
Laravel с Turbo JS
Turbo - это библиотека JavaScript для упрощения создания быстрых и высокоинтерактивных веб-приложений. Она работает с помощью техники под названием...
Слишком много useState? Давайте useReducer!
Слишком много useState? Давайте useReducer!
Современный фронтенд похож на старую добрую веб-разработку, но с одной загвоздкой: страница в браузере так же сложна, как и бэкенд.
Типы данных JavaScript
Типы данных JavaScript
В JavaScript существует несколько типов данных, включая примитивные типы данных и ссылочные типы данных. Вот краткое объяснение различных типов данных...
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик Модуль flexbox, также известный как гибкий модуль разметки box, помогает эффективно проектировать и...
Введение в раздел "Заголовок" в HTML
Введение в раздел "Заголовок" в HTML
Говорят, что лучшее о человеке можно увидеть только изнутри, и это относится и к веб-страницам HTML! Причина, по которой некоторые веб-страницы не...
Как React Helmet спасает меня при разделении файлов CSS?
Как React Helmet спасает меня при разделении файлов CSS?
Многие новички могут столкнуться с проблемой, когда одна страница с CSS наследует свойства от другой страницы с другим CSS. У меня было много проблем,...
2
2
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы исправить это, вы можете попробовать удалить новую строку из строки globalStyles, прежде чем передавать ее методу addFileCssS3. Есть несколько способов сделать это, один из них — просто использовать свойство .trim() для удаления всех начальных и конечных пробелов из строки.

Например:

globalStyles = globalStyles.trim();

Или, используя регулярное выражение, чтобы удалить символ новой строки в конце строки globalStyles:

globalStyles = globalStyles.replace(/\r?\n|\r/g, '');

Второй метод, использующий регулярное выражение, должен работать для удаления новых строк как в Windows, так и в Linux.

Другой возможной причиной может быть неудачный вызов функции, которая повторно вставляет CSS в html-страницу, возможное отсутствие этой функции приводит к тому, что загруженный CSS не используется.

Если это не решит проблему, я рекомендую проверить заголовок Content-Type файла CSS при загрузке на S3, чтобы убедиться, что он установлен правильно. Также проверьте, настроены ли разрешения корзины S3 или параметры кэширования браузера, чтобы не разрешать использование обновленного CSS.

Как вы думаете, почему в строке есть новая строка и как новая строка в конце правила CSS может вызвать какие-либо проблемы? Почему первый метод не удаляет новые строки как в Windows, так и в Linux? И зачем вам использовать чередование вместо класса символов в вашем регулярном выражении?

miken32 14.01.2023 00:00

Другие вопросы по теме