[vite-plugin-sass] Unexpected token u in JSON at position 0
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)
> 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;
}
@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;
}
0 Replies