mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 16:43:55 +00:00

History

Sébastien Chopin bcd1a80c6c Fix README extension		2016-11-07 23:35:43 +01:00
..
css	Version 0.2.0	2016-11-07 23:26:53 +01:00
pages	Version 0.2.0	2016-11-07 23:26:53 +01:00
nuxt.config.js	Version 0.2.0	2016-11-07 23:26:53 +01:00
package.json	Version 0.2.0	2016-11-07 23:26:53 +01:00
README.md	Fix README extension	2016-11-07 23:35: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 ressources:

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 start

Go to http://localhost:8080 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` tag:

NODE_ENV=production npm start

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