无法使用Node.js读取上传到S3存储桶的CSS文件。

huangapple go评论72阅读模式
英文:

Unable to read css file uploaded to S3 bucket with Node.js

问题

我有一个Node.js应用程序,旨在将CSS文件上传到S3,供我的网站使用。一切似乎都正常工作,但当我在我的网站上访问该文件时,没有应用任何CSS更改。我甚至可以在“开发工具/源”下看到CSS文件。但是,该文件中的CSS效果没有生效。如果我在开发工具中对文件进行任何更改,CSS就会立即全部生效。如果我从S3下载文件,然后手动重新上传而不更改任何内容,也可以正常工作。因此,使用Node.js添加文件的格式似乎有问题。对此的任何帮助将不胜感激。

以下是代码部分,不做翻译:

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

//使用这个来删除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)
        })
}
英文:

I have a Node.js app that is meant to upload a css file to S3 to be used by my website. Everything seems to work fine but when I access the file on my website none of the css changes are being applied. I can even see the css file under 'dev tools/sources'. The css in that file though is not taking effect. If I make any change to the file in dev tools the css starts to immediately all work. If I download the file from s3 and then reupload it manually without changing anything that also works. So something to do with the formatting of me adding the file with Node.js is throwing it off. Any help with this would be greatly appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

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

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

const addFileCssS3 = async (file, key, newUrl) =&gt; {

    await s3
        .putObject({
            Body: file,
            Bucket: BucketName,
            Key: key,
            ContentType: &#39;text/css&#39;,
        })
        .promise()
        .catch((error) =&gt; {
            console.error(error)
        })
}

<!-- end snippet -->

答案1

得分: 0

要解决这个问题,您可以尝试在将 globalStyles 字符串传递给 addFileCssS3 方法之前移除换行符。有几种方法可以做到这一点,一种方法是简单地使用 .trim() 属性来移除字符串的前导和尾随空格。

例如:

globalStyles = globalStyles.trim();

或者,通过使用正则表达式从 globalStyles 字符串的末尾移除换行符:

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

第二种方法,使用正则表达式,应该可以移除Windows和Linux中的换行符。

另一个可能的原因可能是调用重新将CSS插入到HTML页面的函数失败,最终导致无法使用下载的CSS。

如果这不能解决问题,我建议检查上传到S3时CSS文件的Content-Type标头,以确保它已正确设置。还要检查S3存储桶权限或浏览器缓存参数是否配置为不允许使用更新后的CSS。

英文:

To fix this, you can try removing the newline from the globalStyles string before passing it to the addFileCssS3 method. There are several ways to do this, one is to simply use the .trim() property to remove any leading and trailing whitespace from a string.

For example:

globalStyles = globalStyles.trim();

Or, by using a regular expression to remove the newline character from the end of the globalStyles string:

globalStyles = globalStyles.replace(/\r?\n|\r/g, &#39;&#39;);

The second method, using regular expression, should work to remove newlines from both Windows and Linux.

Another possible cause could be the failed call to a function that re-inserts the CSS into the html page, the eventual lack of this function causes the downloaded CSS not to be used.

If this doesn't solve the problem, I recommend checking the Content-Type header of the CSS file when uploaded to S3 to make sure it's set correctly.
Also check if the S3 bucket permissions or browser caching parameters are configured to not allow the use of the updated CSS.

huangapple
  • 本文由 发表于 2023年1月11日 04:55:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/75075751.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定