'Vite recognizes link with sass on npm run build, but not on npm run dev

I am using a <link> tag to import a SASS/SCSS in the Vite/VueJS 3 index file:

<link rel="stylesheet" type="sass" href="/src/assets/test.scss">

The thing is it works very well when I run npm run build: the SCSS is converted into CSS, merged in the generated files and applied to the page as expected.

But when I run npm run dev, if I look at the page source code it simply outputted that <link ...> tag as-is to the browser.

This is my entire index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite</title>
    <link rel="stylesheet" type="sass" href="/src/assets/test.scss">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

I tested more than one SCSS and it is not due to error in that file. For the sake of simplicity, this is a very small sample of valid SCSS test.scss that should affect the entire page:

body{
    background-color: red !important;
}

Why does it work on build, but does not work in dev (HRM)?

vue.jsvite


Solution 1:[1]

After some trial and error, it seems that the link element is not correctly compiled by the dev (HRM) mode, even if production build works.

It may be realted to Webpack, as a more traditional way works for both, dev and build.

The solution is to create a script of "module" type and import the file there:

<script type="module">
  import "/src/assets/test.scss";
</script>

Now it gets compiled in both versions.

It works even with a shorter version of the same process:

<script type="module" src="/src/assets/bootstrap/scss/bootstrap.scss"></script>

Though the question "Why does it work on build, but does not work in dev (HRM)?" remains unanswered here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 E. Zacarias

Related Questions