2016-11-07 22:26:53 +00:00
|
|
|
# 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
|
|
|
|
|
|
2016-11-18 03:02:43 +00:00
|
|
|
In `nuxt.config.js` file, add the CSS resources:
|
2016-11-07 22:26:53 +00:00
|
|
|
|
|
|
|
|
```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
|
2016-11-09 22:59:41 +00:00
|
|
|
npm run dev
|
2016-11-07 22:26:53 +00:00
|
|
|
```
|
|
|
|
|
|
2016-11-09 22:59:41 +00:00
|
|
|
Go to [http://localhost:3000](http://localhost:3000) and navigate inside the app.
|
2016-11-07 22:26:53 +00:00
|
|
|
|
|
|
|
|
## Production
|
|
|
|
|
|
|
|
|
|
In production, they will be minified and extracted in a file named `styles.css` and added in the `<head>` of the page.
|
|
|
|
|
|
2016-11-09 22:59:41 +00:00
|
|
|
To launch the demo in production mode so you can see the `<head>` populated with the `<link>` tag:
|
2016-11-07 22:26:53 +00:00
|
|
|
|
|
|
|
|
```bash
|
2016-11-09 22:59:41 +00:00
|
|
|
npm run build
|
|
|
|
|
npm start
|
2016-11-07 22:26:53 +00:00
|
|
|
```
|
|
|
|
|
|
2016-11-09 22:59:41 +00:00
|
|
|
Go to [http://localhost:3000](http://localhost:3000) and check the source code.
|
