mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
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:
parent
edc299a043
commit
ab418573b5
@ -46,59 +46,3 @@ For example, referencing an image file that will be processed if a build tool is
|
|||||||
::note
|
::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.
|
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'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
::
|
|
||||||
|
Loading…
Reference in New Issue
Block a user