mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-05 21:53:56 +00:00
9ebbb14eab
- Add README for examples vuex-store, async-data and global-css - Add examples/global-css/ - Feature: we can now use nuxt.config.js to add global css files and modules - Fix: show webpack error of compilation |
||
|---|---|---|
| .. | ||
| css | ||
| pages | ||
| nuxt.config.js | ||
| package.json | ||
| README.me | ||
# 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:
```js
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:
```bash
npm install
npm start
```
Go to [http://localhost:8080](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 `<link>` tag:
```bash
NODE_ENV=production npm start
```
Go to [http://localhost:8080](http://localhost:8080) and check the source code.