Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Cara load css di nuxt.js
Kenapa css(main.css) tidak terbaca padahal saya sudah setting di nuxt.config.js
const pkg = require('./package')
module.exports = {
mode: 'spa',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description },
// example vue-meta
{ hid: 'title', name: 'title', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Open+Sans' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'~/assets/style/app.styl',
'~/assets/css/main.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'@/plugins/vuetify'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios'
],
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
}
Tanggapan
buka webnya, klik kanan, cek di tab console, errornya apa
Ngga ada error apa2 bang hilman
1 Jawaban:
Mengacu ke <a href=' https://nuxtjs.org/api/configuration-css/ '>dokumentasi css di nuxtjs</a>
<pre> export default { css: [ // Load a Node.js module directly (here it's a Sass file) 'bulma', // CSS file in the project '@/assets/css/namafilekamu.css', ] } </pre>
jangan lupa restar servernya habis merubah sesuatu
Tanggapan
Makasih bang hilman udh ngingetin restart server, skrng bisa tapi kalo di main.css saya kasih begini:
- { font-family: monospace; }
google iconnya jg ikut berubah jadi text biasa.
udh saya coba ganti * jadi body font nya malah ga berubah sama sekali
saya tidak mengerti masalah google iconnya, ini pertanyaan yang berbeda, silahkan buka lapak baru untuk masalah lain. pastikan menampilkan error/hasil inspect element > pilih salah satu element > dan lihat cssnya di bagian 'style'