Update 4.assets.md

Remove the Global Styles Imports part, since it is already documented in Using Preprocessors section under 5.styling with similar expression. Moving it to Styling makes more sense.
This commit is contained in:
mianlang 2024-11-21 10:54:16 +08:00 committed by GitHub
parent edc299a043
commit ab418573b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -46,59 +46,3 @@ For example, referencing an image file that will be processed if a build tool is
::note
Nuxt won't serve files in the [`assets/`](/docs/guide/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
::
### Global Styles Imports
To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/docs/api/nuxt-config#vite) option at your [`nuxt.config`](/docs/api/nuxt-config) file.
#### Example
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](/docs/guide/directory-structure/pages) and [components](/docs/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 twoslash [SCSS]
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "~/assets/_colors.scss" as *;'
}
}
}
}
})
```
```ts twoslash [SASS]
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
sass: {
additionalData: '@use "~/assets/_colors.sass" as *\n'
}
}
}
}
})
```
::