mirror of https://github.com/nuxt/nuxt.git synced 2024-11-30 09:27:13 +00:00

History

Sébastien Chopin 18a2b57655 Add nuxt-build and nuxt-start, build:false and dev option		2016-11-09 23:59:41 +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	Add nuxt-build and nuxt-start, build:false and dev option	2016-11-09 23:59:41 +01:00
README.md	Add nuxt-build and nuxt-start, build:false and dev option	2016-11-09 23:59:41 +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 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.