From 913111d9be77a49c228c8d7e5195694e2214f310 Mon Sep 17 00:00:00 2001 From: Angelo Schuler Piletti <74366173+AngeloSchulerPiletti@users.noreply.github.com> Date: Wed, 10 Aug 2022 13:43:18 -0300 Subject: [PATCH 1/7] Global style imports It shows how can you import SCSS/SASS files (such as other preprocessors) to be used globally at your Nuxt components. Why did I create it? It took a while to figure out how to do it using Nuxt 3. Also, I noticed that there are other ones with the same doubt asking in forums. --- docs/content/2.guide/2.features/3.assets.md | 43 +++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index 53a78ab0592..d7a06fb9538 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/docs/content/2.guide/2.features/3.assets.md @@ -42,3 +42,46 @@ For example, referencing an image file that will be processed if a build tool is ::alert{type=info icon=💡} Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/` directory](#public-directory). :: + +### Global Styles Imports + +To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/api/configuration/nuxt.config#vite) option at your [`nuxt.config`](/api/configuration/nuxt.config) file + +#### Example + +Let's supose this colors variable files: + +::code-group +```scss [_colors.scss] +$primary: #49240F; +$secondary: #E4A79D; +``` +```sass [_colors.sass] +$primary: #49240F +$secondary: #E4A79D +``` +:: + +In your `nuxt.config` + +```ts nuxt.config.ts +import { defineNuxtConfig } from 'nuxt' + +export default defineNuxtConfig({ + // other options + vite: { + css: { + preprocessorOptions: { + scss: { + additionalData: '@use "@/assets/sass/_colors.scss" as *;', + }, + // Case you are using .sass: + // sass:{ + // additionalData: '@use "@/assets/sass/_colors.sass" as *', + // } + } + } + }, + // other options + }); +``` From 2c43e876fb8396bef54a36ad8f8ad0978bfb83d2 Mon Sep 17 00:00:00 2001 From: Angelo Schuler Piletti <74366173+AngeloSchulerPiletti@users.noreply.github.com> Date: Wed, 10 Aug 2022 14:17:56 -0300 Subject: [PATCH 2/7] Assets directory change and richer explanation --- docs/content/2.guide/2.features/3.assets.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index d7a06fb9538..85255bce503 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/docs/content/2.guide/2.features/3.assets.md @@ -49,14 +49,14 @@ To globally insert statements in your Nuxt components styles, you can use the [` #### Example -Let's supose this colors variable files: +In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/guide/directory-structure/pages) and [components](/guide/directory-structure/components) ::code-group -```scss [_colors.scss] +```scss [assets/_colors.scss] $primary: #49240F; $secondary: #E4A79D; ``` -```sass [_colors.sass] +```sass [assets/_colors.sass] $primary: #49240F $secondary: #E4A79D ``` @@ -73,11 +73,11 @@ export default defineNuxtConfig({ css: { preprocessorOptions: { scss: { - additionalData: '@use "@/assets/sass/_colors.scss" as *;', + additionalData: '@use "@/assets/_colors.scss" as *;', }, // Case you are using .sass: // sass:{ - // additionalData: '@use "@/assets/sass/_colors.sass" as *', + // additionalData: '@use "@/assets/_colors.sass" as *', // } } } From 602520a4b76c3bd4d4fd1d67a03c0cf3b31baaf7 Mon Sep 17 00:00:00 2001 From: Angelo Schuler Piletti <74366173+AngeloSchulerPiletti@users.noreply.github.com> Date: Fri, 12 Aug 2022 11:24:01 -0300 Subject: [PATCH 3/7] Splitting SASS and SCSS options with code-group Following @antfu suggestion --- docs/content/2.guide/2.features/3.assets.md | 25 ++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index 85255bce503..659d5f28588 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/docs/content/2.guide/2.features/3.assets.md @@ -64,7 +64,8 @@ $secondary: #E4A79D In your `nuxt.config` -```ts nuxt.config.ts +::code-group +```ts SCSS import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ @@ -75,13 +76,27 @@ export default defineNuxtConfig({ scss: { additionalData: '@use "@/assets/_colors.scss" as *;', }, - // Case you are using .sass: - // sass:{ - // additionalData: '@use "@/assets/_colors.sass" as *', - // } } } }, // other options }); ``` +```ts SASS +import { defineNuxtConfig } from 'nuxt' + +export default defineNuxtConfig({ + // other options + vite: { + css: { + preprocessorOptions: { + sass:{ + additionalData: '@use "@/assets/_colors.sass" as *', + }, + } + } + }, + // other options + }); +``` +:: From f7ef7ededf54c415b2aa9626e4edc700b1f19c1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Sat, 13 Aug 2022 15:35:31 +0200 Subject: [PATCH 4/7] Apply suggestions from code review --- docs/content/2.guide/2.features/3.assets.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index 659d5f28588..0efe99cc702 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/docs/content/2.guide/2.features/3.assets.md @@ -65,7 +65,7 @@ $secondary: #E4A79D In your `nuxt.config` ::code-group -```ts SCSS +```ts [SCSS] import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ @@ -82,7 +82,7 @@ export default defineNuxtConfig({ // other options }); ``` -```ts SASS +```ts [SASS] import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ From 31132e43300f4d75896170e3be5ca8cccd39c102 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 14 Aug 2022 20:44:42 +0800 Subject: [PATCH 5/7] chore: formatting --- docs/content/2.guide/2.features/3.assets.md | 40 ++++++++++----------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index 066cebc2917..9ae6b75bfc4 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/docs/content/2.guide/2.features/3.assets.md @@ -69,34 +69,30 @@ In your `nuxt.config` import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ - // other options - vite: { - css: { - preprocessorOptions: { - scss: { - additionalData: '@use "@/assets/_colors.scss" as *;', - }, - } + vite: { + css: { + preprocessorOptions: { + scss: { + additionalData: '@use "@/assets/_colors.scss" as *;' } - }, - // other options - }); + } + } + } +}) ``` ```ts [SASS] import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ - // other options - vite: { - css: { - preprocessorOptions: { - sass:{ - additionalData: '@use "@/assets/_colors.sass" as *', - }, - } + vite: { + css: { + preprocessorOptions: { + sass: { + additionalData: '@use "@/assets/_colors.sass" as *' } - }, - // other options - }); + } + } + } +}) ``` :: From 21bc8e8c5f1179a22d3f0f0e4d7c5c50e51e6527 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 14 Aug 2022 20:47:20 +0800 Subject: [PATCH 6/7] chore: formatting --- docs/content/2.guide/2.features/3.assets.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index 9ae6b75bfc4..ff92e4460e8 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/docs/content/2.guide/2.features/3.assets.md @@ -52,19 +52,23 @@ To globally insert statements in your Nuxt components styles, you can use the [` In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/guide/directory-structure/pages) and [components](/guide/directory-structure/components) ::code-group + ```scss [assets/_colors.scss] $primary: #49240F; $secondary: #E4A79D; ``` + ```sass [assets/_colors.sass] $primary: #49240F $secondary: #E4A79D ``` + :: In your `nuxt.config` ::code-group + ```ts [SCSS] import { defineNuxtConfig } from 'nuxt' @@ -80,6 +84,7 @@ export default defineNuxtConfig({ } }) ``` + ```ts [SASS] import { defineNuxtConfig } from 'nuxt' @@ -95,4 +100,5 @@ export default defineNuxtConfig({ } }) ``` + :: From 8010d1518acac2159516bafceb3b69d7c7b4d0d0 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 14 Aug 2022 14:48:42 +0200 Subject: [PATCH 7/7] fix lint --- docs/content/2.guide/2.features/3.assets.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index ff92e4460e8..b98a4f668e9 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/docs/content/2.guide/2.features/3.assets.md @@ -45,7 +45,7 @@ Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/ ### Global Styles Imports -To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/api/configuration/nuxt.config#vite) option at your [`nuxt.config`](/api/configuration/nuxt.config) file +To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/api/configuration/nuxt.config#vite) option at your [`nuxt.config`](/api/configuration/nuxt.config) file. #### Example