load scss from a <link> element.

Wondering if you can help me understand something. My project is using sass and loading styles with an index.scss file works fine in the locally with the Vite development server. I have index.scss loading in index.html like so:

index.html

<link rel="stylesheet" href="scss/index.scss">

However when I proxy my remote environment I am searching and replacing my generated css file with the local scss file:

      VitePluginBrowserSync({
        bs: {
          https: false,
          rewriteRules: [
            {
              match: "<body>",
              fn: function (req, res, match) {
                return `<body><script type="module">
                import RefreshRuntime from 'http://localhost:5173/@react-refresh'
                RefreshRuntime.injectIntoGlobalHook(window)
                window.$RefreshReg$ = () => {}
                window.$RefreshSig$ = () => (type) => type
                window.__vite_plugin_react_preamble_installed__ = true
              </script>
              <script type="module" src="http://localhost:5173/@vite/client"></script>
              `;
              },
            },
            {
              //replace css with scss
              match:
                '<link href="/assets/styles/index.css" media="all" rel="stylesheet" />',
              fn: function (req, res, match) {
                return '<link href="http://localhost:5173/scss/index.scss" media="all" rel="stylesheet" />';
              },
            }
          ],
          proxy: {
            target: proxy.url,
            ws: true,
          },
          notify: false,
        },
      })

The scss file loads but the styles are not applied to frontend. When I use a Githubissues.

Githubissues is a development platform for aggregating issues.

Applelo / vite-plugin-browser-sync

load scss from a <link> element. #14