How to include CSS in page in Nuxt.js project

Question

In my nuxt.config.js I added this:

module.exports = {
    head: {
        css: [
            'bulma/css/bulma.css',
             "HTML_design/libs/fancybox/jquery.fancybox.css",
             "HTML_design/libs/owl-carousel/assets/owl.carousel.css",
             "HTML_design/style.css",
            {src: "~/assets/css/style.css", lang: 'css'}
        ]

    }
};

I've used several methods of connection, but none has helped.

In my package.json :

{
  "name": "mynuxt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nuxt",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.16.2",
    "bulma": "^0.5.1",
    "nuxt": "^1.0.0-rc4",
    "vue-style-loader": "^3.0.1"
  }
}

But in the console in my browser, I can not see the connected css files. What do I do?

Answer 1

Because your configuration is wrong. Check the example below:

module.exports = {
    head: {
        // NOT here
    },
    css: [
        'bulma/css/bulma.css',
        '~/assets/css/style.css'
    ]
}

Answer 2

您可以查看资源选项卡以查看它是否已加载。

Answer 3

nuxt 的版本必须小于 ^1.0.0-rc4