The css option is used to add global CSS files. These can be .css, .less, or .scss files. They also can be the modules and libraries loaded from the Node.js /node_modules/ directory in your project directly. For example, take the following:
// nuxt.config.js
export default {
css: [
'jquery-ui-bundle/jquery-ui.min.css',
'@/assets/less/styles.less',
'@/assets/scss/styles.scss'
]
}
In the preceding configuration, we load the CSS file from the jQuery UI module that is installed in the /node_modules/ directory, as well as the Less and Sass files that are stored in the /assets/ directory. Note that if you are writing styles using .less and .scss files, you need to install the Less and Sass modules with their webpack loaders, as follows:
$ npm i less less-loader --save-dev
$ npm i node-sass --save-dev
$ npm i sass-loader --save-dev
We will use this...