mirror of https://github.com/nuxt/nuxt.git synced 2024-11-26 15:42:09 +00:00

History

Sébastien Chopin 8c14c9018e update css		2016-12-07 23:44:11 +01:00
..
css	update css	2016-12-07 23:44:11 +01:00
pages	Version 0.2.0	2016-11-07 23:26:53 +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.