如何在Nuxt.js项目的页面中包含CSS

Posted 2023-01-06

在我的nuxt.config.js中，我添加了这个：

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'
        ]

    
;

我已经使用了几种连接方法，但是都没有帮助。

在我的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"
  

但是在浏览器的控制台中，看不到连接的css文件。我该怎么办？

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9tYUk0VS5wbmcifQ==” alt =“在此处输入图像描述”>

答案

因为您的配置错误。检查以下示例：

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

另一答案

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

另一答案

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