When I try to change the scss variable, the html looks like this

<link href="assets/bootstrap.css" rel="stylesheet">

become like this

<link href="assets/bootstrap.css" rel="stylesheet">
<link href="http://localhost/assets/bootstrap.css?browsersync=1234567890" rel="stylesheet">

I tried changing the scss variable multiple times per reload stream, but the html became like this

<link href="assets/bootstrap.css" rel="stylesheet">
<link href="http://localhost/assets/bootstrap.css?browsersync=1234567890" rel="stylesheet">
<link href="http://localhost/assets/bootstrap.css?browsersync=567890123" rel="stylesheet">
<link href="http://localhost/assets/bootstrap.css?browsersync=901234567" rel="stylesheet">

…etc
Moreover, the html page does not see the effect of css changes. I believe it is due to the introduction of multiple bootstrap.css

What is the reason? There is no complicated code, just following the official documentation of browser-sync

.pipe(browserSync.stream());

I only made one small change, changing ('browser-sync').create(); to ('browser-sync').create('my_server');

Because I split the task into multiple files, I import browser-sync in the scss task like this

const myServer = ('browser-sync').get('my_server');

task:

.pipe(myServer.reload({stream: true,}),)

The strangest thing is, I remember that in the past, when browser-sync was reloading stream, words like sync seemed to appear in the upper right corner of the browser, but now they don’t. Is this one of the reasons?
But I do see that bootstrap.css is loaded by browser-sync, and usually I see the effect of the change once, and then only bootstrap.css is loaded but the page is not displayed (maybe because of multiple bootstrap.css)