Removing <style lang="scss">...</style> while `nuxt dev` causes error
See original GitHub issueEnvironment
- Operating System:
Linux
- Node Version:
v16.14.2
- Nuxt Version:
3.0.0-rc.10
- Nitro Version:
0.5.4
- Package Manager:
npm@7.17.0
- Builder:
vite
- User Config:
-
- Runtime Modules:
-
- Build Modules:
-
Reproduction
https://stackblitz.com/edit/nuxt-starter-bqwhz6?file=app.vue
Describe the bug
While nuxt dev
is running, remove the whole section <script lang="scss">...</script>
from app.vue
and reload page.
ERROR 9:53:15 PM [vite] Internal server error: [sass] expected "{". 21:53:15
╷
5 │ </template>
│ ^
╵
app.vue 5:12 root stylesheet
Plugin: vite:css
File: /home/projects/nuxt-starter-bqwhz6/app.vue
Error: expected "{".
╷
5 │ </template>
│ ^
╵
app.vue 5:12 root stylesheet
at Object.wrapException (/home/projects/nuxt-starter-bqwhz6/node_modules/sass/sass.dart.js:1247:17)
Additional context
No response
Logs
No response
Issue Analytics
- State:
- Created a year ago
- Reactions:3
- Comments:7 (2 by maintainers)
Top Results From Across the Web
Configuration - Nuxt
By default, Nuxt is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file.
Read more >How to setup SASS/SCSS/sass-loader in Nuxt - Stack Overflow
Finally I managed to fix the problem by downgrading the loader also followed by removing and installing again nuxt.
Read more >vue-loader - npm
An SFC loaded in custom elements mode inlines its <style> tags as strings under the component's styles option. When used with ...
Read more >CSS Transitions In Vuejs And Nuxtjs - Smashing Magazine
In this tutorial, we'll look at the different ways to apply transitions in both Vue.js and Nuxt.js applications. Transitions are a module of...
Read more >Globally accessible CSS and SCSS/ SASS in your Nuxt ...
When building an App in Nuxt, it's likely you may choose to take advantage of the style tag with your single file components....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
https://stackblitz.com/edit/github-innzae?file=src%2FApp.vue
Unable to reproduce. I added
npm i -D sass
and replaced the style withlang="scss"
.Just to add more data point to this issue, similar error can be triggered using PostCSS.
Steps to reproduce
Demo: https://stackblitz.com/edit/nuxt-starter-cq84x7?file=app.vue