[Nuxt] Add CSS Libraries to Nuxt

標籤：nbsp   mod   blog   progress   library   data-   lin   --   span   

You can easily add CSS libraries to Nuxt using yarn or npm to install them, then simply adding them to the nuxt.config.js so they‘re included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your nuxt.config.js.

 

Install:

npm i --save tachyons

 

nuxt.config.js:

module.exports = {  /*  ** Headers of the page  */  head: {    title: ‘starter‘,    meta: [      { charset: ‘utf-8‘ },      { name: ‘viewport‘, content: ‘width=device-width, initial-scale=1‘ },      { hid: ‘description‘, name: ‘description‘, content: ‘Nuxt.js project‘ }    ],    link: [      { rel: ‘icon‘, type: ‘image/x-icon‘, href: ‘/favicon.ico‘ }    ]  },  /**   * Global CSS   */  css: [‘tachyons/css/tachyons.css‘],  /*  ** Customize the progress-bar color  */  loading: { color: ‘#3B8070‘ },  /*  ** Build configuration  */  build: {    /*    ** Run ESLINT on save    */    extend (config, ctx) {      if (ctx.isClient) {        config.module.rules.push({          enforce: ‘pre‘,          test: /\.(js|vue)$/,          loader: ‘eslint-loader‘,          exclude: /(node_modules)/        })      }    }  }}

 

[Nuxt] Add CSS Libraries to Nuxt