mirror of https://github.com/nuxt/nuxt.git synced 2024-11-14 10:04:05 +00:00

History

Sébastien Chopin 0142dae008 Replace router-link to nuxt-link		2016-12-16 18:12:38 +01:00
..
css	update css	2016-12-07 23:44:11 +01:00
pages	Replace router-link to nuxt-link	2016-12-16 18:12:38 +01:00
nuxt.config.js	Add aliases and update examples	2016-11-16 17:55:26 +01:00
package.json	Add package.jsonn in examples	2016-11-10 14:30:18 +01:00
README.md	Fixed typos	2016-11-18 04:02:43 +01:00

README.md

Global CSS with Nuxt.js

Nuxt.js let you define the CSS files/modules/libraries you want to set as globals (included in every pages).

Usage

In nuxt.config.js file, add the CSS resources:

const { resolve } = require('path')

module.exports = {
  css: [
    // Load a node.js module
    'hover.css/css/hover-min.css',
    // node.js module but we specify the lang
    { src: 'bulma', lang: 'sass' },
    // Css file in the project
    // It is important to give an absolute path
    resolve(__dirname, 'css/main.css')
  ]
}

Demo

To see the demo working:

npm install
npm run dev

Go to http://localhost:3000 and navigate inside the app.

Production

In production, they will be minified and extracted in a file named styles.css and added in the <head> of the page.

To launch the demo in production mode so you can see the <head> populated with the <link> tag:

npm run build
npm start

Go to http://localhost:3000 and check the source code.