Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago
Leke

[vite-plugin-sass] Unexpected token u in JSON at position 0 error

I just migrated my react sass application from webpack to Vite but I haven’t been able to build since the migration took place.
The error below is what I encounter

> vite build

vite v4.3.9 building for production...
✓ 125 modules transformed.
✓ built in 3.60s
[vite-plugin-sass] Unexpected token u in JSON at position 0
file: /Users/project/src/assets/css/sass/main.scss
error during build:
SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.transformReducer (file:///Users//node_modules/rollup/dist/es/shared/node-entry.js:23567:81)
    at file:///Users//node_modules/rollup/dist/es/shared/node-entry.js:24590:140
    at async transform (file:///Users//node_modules/rollup/dist/es/shared/node-entry.js:23576:16)
    at async ModuleLoader.addModuleSource (file:///Users//node_modules/rollup/dist/es/shared/node-entry.js:23782:30)


main.scss

@use "./_01_mixins.scss" as *;
@use "./_02_variables" as *;
@use "./_03_core.scss" as *;
@use "./_04_plugins.scss" as *;
@use "./_05_views.scss" as *;
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");

/** your custom css code **/
#root {
  min-width: 320px;
}
.container-fluid {
  max-width: 2000px;
}
.btn-link,
.btn-link:hover {
  font-weight: 500 !important;
}
a.white:hover,
a.white:active {
  color: $theme-color-1 !important;
}
label {
  font-weight: 600 !important;
  font-size: 90% !important;
}
a,
button,
input,
.sidebar .main-menu ul li a {
  transition: color 0.5s, border 0.5s, background 0.5s, opacity 0.5s,
    height 0.5s;
}
.sidebar .main-menu ul li a {
  padding: 0 10px;
  line-height: 1.2;
  text-align: center;
}
.btn-primary {
  color: #fff !important;
}
.has-float-label label {
  z-index: 10000;
}
Was this page helpful?