2

Мой nuxt.config.js

    module.exports = {
        head: {
            meta: [
                {charset: 'utf-8'},
                {'http-equiv': 'X-UA-Compatible', content: 'IE=edge'}
            ],
            css: [
                'hover.css/css/hover-min.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'}
            ],
            build: {
                extractCSS: true
            }

        }
};

И мой package.json

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

Запускаю npm run build и npm run start, но css файлы не подключаются. Вот скриншот консоливведите сюда описание изображения Как подключить css? Пробую так, как в доках, ничего не получается

3 ответа 3

3

Если речь идет о подключении стилей глобально, то в nuxt.config.js

module.exports = {
  head: {
    ...
  },
  css: [
    '~assets/css/main.css',
    { src: '~assets/sass/colors.scss', lang: 'scss' }
  ]
}

В продакшн версии, после сжатия и конкатенации стили будут находиться в файле styles.css в <head> страницы.

Другими словами, массив css размещается после объекта head, а не внутри него, как у Вас в коде.

1

Версия nuxt должна быть меньше ^1.0.0-rc4. Я поставила 0.10.6 и все стало работать

1

Также можно добавить специфичный файл со стилями в конкретный Page или Layout. Вот пример условного page.vue:

<template>
  <nav class="navbar navbar-dark bg-dark">
    <!-- Navbar content -->
  </nav>
</template>
    
<style>
@import "node_modules/bootstrap/dist/css/bootstrap.min.css";
</style>

В данном случае содержимое файла bootstrap.min.css будет заинлайнен на страницу page

p.s. Подключать бутстрап таким образом не рекомендую! Это просто для примера.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.