Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem when importing global styles in nuxt.config

See original GitHub issue

Environment

  • Operating System: Linux
  • Node Version: v14.17.1
  • Nuxt Version: 3-3.0.0-27234211.2a0afbd
  • Package Manager: Yarn
  • Bundler: Webpack
  • User Config: meta
  • Runtime Modules: -
  • Build Modules: -

Describe the bug and expected behavior

I am trying to globally import a stylesheet into nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  meta: {
    style: [
      '~/assets/scss/global.scss',
    ]
  }
})

But when launching the application, there are several errors in the console and terminal:

entry.mjs:39 Error while mounting app: DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at createElement (http://localhost:3000/_nuxt/node_modules/@vueuse/head/dist/index.mjs?v=8287862b:47:10)
    at insertTags (http://localhost:3000/_nuxt/node_modules/@vueuse/head/dist/index.mjs?v=8287862b:199:22)
    at Object.updateDOM (http://localhost:3000/_nuxt/node_modules/@vueuse/head/dist/index.mjs?v=8287862b:259:7)
    at http://localhost:3000/_nuxt/node_modules/nuxt3/dist/meta/runtime/lib/vueuse-head.plugin.mjs:14:12
    at callWithErrorHandling (http://localhost:3000/_nuxt/node_modules/.vite/vue.js?v=8287862b:6280:18)
    at callWithAsyncErrorHandling (http://localhost:3000/_nuxt/node_modules/.vite/vue.js?v=8287862b:6288:17)
    at ReactiveEffect.getter [as fn] (http://localhost:3000/_nuxt/node_modules/.vite/vue.js?v=8287862b:6564:16)
    at ReactiveEffect.run (http://localhost:3000/_nuxt/node_modules/.vite/vue.js?v=8287862b:391:21)
    at doWatch (http://localhost:3000/_nuxt/node_modules/.vite/vue.js?v=8287862b:6645:13)
    at watchEffect (http://localhost:3000/_nuxt/node_modules/.vite/vue.js?v=8287862b:6502:10)

An incorrect file link appears in the <head> tag: <style 0="~" 1="/" 2="a" 3="s" 4="s" 5="e" 6="t" 7="s" 8="/" 9="s" 10="c" 11="s" 12="s" 13="/" 14="g" 15="l" 16="o" 17="b" 18="a" 19="l" 20="." 21="s" 22="c" 23="s" 24="s"></style>

Steps to reproduce

Steps to reproduce the behavior:

  1. Create file assets/scss/global.scss
  2. Go to nuxt.config.js
  3. Add follow code inside defineNuxtConfig function
meta: {
    style: [
      '~/assets/scss/global.scss',
    ]
  }
  1. run yarn dev
  2. Open localhost:3000 and see an error in console and wrong <script> tag inside <head> tag

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

7reactions
grunghicommented, Oct 12, 2021

You can apparently import your global styles in the css property, same as in nuxt 2:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  css: ['~/assets/styles/main.css'],
})

Edit: It also works with scss, just have to yarn add sass .

1reaction
jonybekovcommented, Oct 12, 2021

Actually it started working. Thanks

Read more comments on GitHub >

github_iconTop Results From Across the Web

why nuxt.js global css on config is not working? - Stack Overflow
I try to put css files on assets assest/css/style.css and call it to my nuxt.config.js but it is not working i need to...
Read more >
Configuration - Nuxt
The axios-module cannot be used in nuxt.config.js . You will need to import axios and configure it again. Further configuration.
Read more >
Globally accessible CSS and SCSS/ SASS in your Nuxt ...
To import global css, open your nuxt.config.js file and navigate to the css array, here you can add any global CSS.
Read more >
Troubles applying global scss : r/Nuxt - Reddit
Install this https://github.com/nuxt-community/style-resources-module ... but read the warning. Otherwise you would need to import your ...
Read more >
Getting Started - BootstrapVue
Bootstrap v4 CSS employs a handful of important global styles and settings that you'll need to be aware of when using it, all...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Error on using useFetch

Next page

[Nuxt3] [npm run dev] Unexpected token '.'