A propriedade css

O Nuxt permite você definir ficheiros/módulos/bibliotecas CSS que você quiser para definir globalmente (incluído em todas páginas).

No caso de você quiser usar sass certifique-se que você tenha instalado os pacotes sass e sass-loader. Se você não tiver, apenas

Yarn

yarn add --dev sass sass-loader@10

NPM

npm install --save-dev sass sass-loader@10

Tipo: Array
- Itens: string

nuxt.config.js

export default {
  css: [
    // Carrega um módulo de Node.js diretamente (aqui está um ficheiro Sass)
    'bulma',
    // Ficheiro CSS dentro do projeto
    '@/assets/css/main.css',
    // Ficheiro SCSS dentro do projeto
    '@/assets/css/main.scss'
  ]
}

O Nuxt irá automaticamente adivinhar o tipo do ficheiro pela sua extensão e usar o carregador do pré-processador adequado para o webpack. Você continuará a precisar instalar o carregador exibido se você precisar usar eles.

Extensões de Estilo

Você pode omitir a extensão do ficheiro para os ficheiros CSS/SCSS/PostCSS/Less/Stylus listados no array css dentro do seu ficheiro nuxt.config.

nuxt.config.js

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

Se você tem dois ficheiros com o mesmo nome por exemplo main.scss e main.css, e não especificar uma extensão na entrada do array css, por exemplo css: ['~/assets/css/main'], então apenas um ficheiro será carregado dependendo da ordem do styleExtensions. Neste caso apenas o ficheiro css será carregado e o ficheiro scss será ignorado porque o css vem primeiro no array styleExtension padrão.

Ordem padrão: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']

Edit this page on GitHub Updated at Tue, Mar 21, 2023