[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 buildvite v4.3.9 building for production...✓ 125 modules transformed.✓ built in 3.60s[vite-plugin-sass] Unexpected token u in JSON at position 0file: /Users/project/src/assets/css/sass/main.scsserror 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 buildvite v4.3.9 building for production...✓ 125 modules transformed.✓ built in 3.60s[vite-plugin-sass] Unexpected token u in JSON at position 0file: /Users/project/src/assets/css/sass/main.scsserror 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
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;}
Similar Threads
Recent Announcements
Continue the conversation
Join the Discord to ask follow-up questions and connect with the community