\r\n\u003C/template>\r\n```\r\n`Situation 2`(use `base.scss` in `vite [css] [preprocessorOptions] [scss] [additionalData]`):\r\n```\r\nexport default defineNuxtConfig({\r\n app: {\r\n layoutTransition: { name: 'layout', mode: 'out-in' },\r\n pageTransition: { name: 'page', mode: 'out-in' },\r\n },\r\n\r\n // css: ['~/assets/css/base.scss'],\r\n\r\n devtools: { enabled: true },\r\n\r\n vite: {\r\n css: {\r\n preprocessorOptions: {\r\n scss: {\r\n additionalData: '@use \"@/assets/css/base.scss\" as *;',\r\n },\r\n },\r\n },\r\n }\r\n});\r\n```\r\nresult:\r\n\r\nso,why is the `scss variable` effective, but the setting of the `body` is invalid?\r\n\r\nOkay, I thought `base.scss` should be placed in `css` option, so:\r\n`Situation 1`(css option):\r\n```\r\nexport default defineNuxtConfig({\r\n app: {\r\n layoutTransition: { name: 'layout', mode: 'out-in' },\r\n pageTransition: { name: 'page', mode: 'out-in' },\r\n },\r\n\r\n css: ['~/assets/css/base.scss'],\r\n\r\n devtools: { enabled: true },\r\n compatibilityDate: '2024-07-04',\r\n});\r\n```\r\nresult:\r\n\r\nterminal:\r\n```\r\nERROR Internal server error: [sass] Undefined variable. 11:55:53\r\n ╷\r\n4 │ border: 1px solid $linear-color-red;\r\n │ ^^^^^^^^^^^^^^^^^\r\n ╵\r\n components/User.vue 4:21 root stylesheet\r\n Plugin: vite:css\r\n File: /home/projects/nuxt-starter-anwoe5/components/User.vue:10:21\r\n Error: Undefined variable.\r\n ╷\r\n 4 │ border: 1px solid $linear-color-red;\r\n │ ^^^^^^^^^^^^^^^^^\r\n ╵\r\n components/User.vue 4:21 root stylesheet\r\n at Object.wrapException (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:2161:43)\r\n at eval (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:83775:23)\r\n at _wrapJsFunctionForAsync_closure.eval (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:4900:15)\r\n at _wrapJsFunctionForAsync_closure.call$2 (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:35592:12)\r\n at Object._asyncStartSync (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:4864:20)\r\n at _EvaluateVisitor2.visitVariableExpression$body$_EvaluateVisitor0 (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:83781:16)\r\n at _EvaluateVisitor2.visitVariableExpression$1 (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:83755:19)\r\n at VariableExpression0.accept$1$1 (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:115765:22)\r\n at VariableExpression0.accept$1 (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:115768:19)\r\n at _EvaluateVisitor_visitListExpression_closure2.call$1 (/home/projects/nuxt-starter-anwoe5/node_modules/.pnpm/sass@1.77.6/node_modules/sass/sass.dart.js:88981:25) (x2)\r\n```\r\nOkay, so I can't use the scss variable in `scenario 1`? So I changed it this way:\r\n`~/components/User.vue`:\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"total\">hello nuxt\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle scoped lang=\"scss\">\r\n.total {\r\n border: 1px solid white;\r\n}\r\n\u003C/style>\r\n```\r\nresult:\r\n\r\nIt's not reporting an error anymore, but that way I won't be able to use the scss variable.\r\n\r\nI don't know if this is a bug, or is the mechanism of `nuxt` designed like this? That means I have to write 2 CSS files, one for writing `styles` and one for defining `scss` variables, and then I have to put these two files separately in the `css` option and `vite [css] [preprocessorOptions] [scss] [additionalData]` options? If it's designed like this, I feel very unfriendly, do you think?\r\nThanks!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2909],{"name":2899,"color":2900},28015,"Placing the custom scss file in the 'css' option of 'nuxt.config.ts' will result in an error message: 'Internal server error: [sass] Undefined variable'","2024-10-18T10:34:34Z","https://github.com/nuxt/nuxt/issues/28015",0.6426907,{"description":2916,"labels":2917,"number":2920,"owner":2869,"repository":2869,"state":2870,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/pearofducks/nuxt-bug-reproduction](https://github.com/pearofducks/nuxt-bug-reproduction)\n\n### Steps to reproduce\n\n- `yarn` then `yarn dev` to bootstrap\n- observe that for `div.page-content`: `foo.css` is loaded *after* `default.vue` and `index.vue` — this is 100% counter to what should be done for base CSS imports, components should be able to override these\n\nbonus round:\n- change `nuxt.config.js` CSS property to import `test.css` instead of `foo.css` (commented in file)\n- observe that the CSS loading order has completely changed and `test.css` now comes *before* the components\n\n### What is expected ?\n\n config.css files should always be loaded before component-based styles\n\n### What is actually happening?\n\nconfig.css is sometimes being loaded after component-based styles, and sometimes after — dependent on the file (size?)\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7688\">#c7688\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2918,2919],{"name":2899,"color":2900},{"name":2866,"color":2867},3851,"CSS loaded in wrong (also varying) order","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3851",0.6490332,{"labels":2926,"number":2931,"owner":2869,"repository":2869,"state":2870,"title":2932,"updated_at":2933,"url":2934,"score":2935},[2927,2930],{"name":2928,"color":2929},"enhancement","8DEF37",{"name":2896,"color":2897},13690,"Sass Variables not available in pages / layouts / components","2024-03-21T00:46:57Z","https://github.com/nuxt/nuxt/issues/13690",0.65055263,{"description":2937,"labels":2938,"number":2940,"owner":2869,"repository":2869,"state":2870,"title":2941,"updated_at":2942,"url":2943,"score":2944},"I'm working in a project that have different users with their logos. Based on the API call I want to load a different CSS with different colour palette.\r\n\r\nNow I have a css folder inside assets folder with main.js (with my custom font styles, etc) and another files in there for the custom color palette: \u003Ccolor-name>-palette.css.\r\n\r\nIn my nuxt.config I'm calling the CSS colour like that:\r\n\r\n `css: [\r\n ' ~/assets/style/app.styl ',\r\n ' ~/assets/css/main.css ',\r\n ' ~/assets/css/orange-palette.css '\r\n ],`\r\n\r\nIs there any way to bind the CSS file depending on the URL path/API call instead of putting the path there?\r\n\r\nI'm not sure if I can use it on templates as well, binding the CSS files in there. Is it possible?\r\n\r\nThanks\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8664\">#c8664\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2939],{"name":2866,"color":2867},5040,"[Help] How to use dynamic CSS files with Nuxt?","2023-01-18T20:10:40Z","https://github.com/nuxt/nuxt/issues/5040",0.65112686,{"description":2946,"labels":2947,"number":2949,"owner":2869,"repository":2869,"state":2870,"title":2950,"updated_at":2951,"url":2952,"score":2953},"I have a global styling asset I want to use but it is SASS, not CSS. Is there a way to set this up in the nuxt.config.js?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c226\">#c226\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2948],{"name":2866,"color":2867},261,"Includes SASS file as a nuxt.config.js CSS asset?","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/261",0.6531783,{"description":2955,"labels":2956,"number":2958,"owner":2869,"repository":2869,"state":2870,"title":2959,"updated_at":2960,"url":2961,"score":2962},"When using the CSS property in `nuxt.conf.js` as explained [here](https://nuxtjs.org/api/configuration-css/), trying to load a *.scss or *.sass file, following error shows in the console:\r\n\r\n> This relative module was not found:\r\n> \r\n> ../assets/main.scss in ./node_modules/babel-loader/lib?{\"presets\":[\"vue-app\"],\"babelrc\":false,\"cacheDirectory\":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue\r\n\r\nCSS files work as expected.\r\n\r\n`nuxt.conf.js:`\r\n\r\n```\r\nmodule.exports = { \r\n ...\r\n css: [{\r\n src: '~assets/main.scss', lang: 'scss'\r\n }],\r\n ...\r\n};\r\n```\r\n\r\nCreated through `vue init nuxt/starter` with Nuxt version 1.0.0-rc3.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1132\">#c1132\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2957],{"name":2866,"color":2867},1279,"Sass files not found ","2023-01-18T15:41:00Z","https://github.com/nuxt/nuxt/issues/1279",0.6571824,["Reactive",2964],{},["Set"],["ShallowReactive",2967],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fp3txfy4Rni-ZtQIndkuWThUoC-Dc1YWPcGuLZ9K-vK8":-1},"/nuxt/ui/3889"]