Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Bulma não está funcionando

Bom dia,

fiz o import do bulma como é explicado na aula, porém o css não está funcionando. É necessário instalar a biblioteca no package.json?

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<template>
  <main class="columns is-gapless is-multiline">
    <div class="column is-one-quarter">
      <BarraLateral />
    </div>
    <div class="column is-three-quarter"></div>
  </main>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import BarraLateral from './components/BarraLateral.vue'

  export default defineComponent({
    name: 'App',
    components: {
      BarraLateral
    }
  })
</script>

<style>

</style>
1 resposta
solução!

Oii, Felipe! Tudo bem?

Obrigada por postar um trecho do seu código!

Felipe, não é necessário instalar a biblioteca no package.json.

Os arquivos HTML e App.vue que você compartilhou está certo, recomendo que verifique se você importou o CSS corretamente no arquivo main.ts. Deixarei o código abaixo para conferência:

import { createApp } from 'vue'
import App from './App.vue'

import '@fortawesome/fontawesome-free/css/all.css'

createApp(App).mount('#app')

Verifique se não há erros de sintaxe em outros arquivos e se no console está apresentando algum erro.

Caso o CSS ainda não esteja funcionando, peço por gentileza que compartilhe o seu Github contendo todos os arquivos do código para podermos te ajudar de forma mais assertiva.

Espero ter ajudado.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software