Nuxt.js: How include css in nuxt js project

[Jussiadev]

In my nuxt.config.js I added this:

 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
            }

        }
};

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

In my packege.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"
  }
}

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

_{This question is available on Nuxt.js community (#c1237)}

[daosonit]

You can add

    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6"

in "devDependencies" in file package.json
this is my file

const webpack = require('webpack')
const router = require('./router/index')

module.exports = {

  dev: (process.env.NODE_ENV !== 'production'),

  watchers: {
    chokidar: {
      usePolling: true
    },
    webpack: {
      aggregateTimeout: 1000,
      poll: 1000
    }
  },

  /**
   * Let you define all default meta for your application inside
   */
  head: {
    title: 'MyWork',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },

  /**
   * Uses its own component to show a progress bar between the routes.
   * You can customize it, disable it or create your own component.
   */
  loading: false,

  /**
   * Use lru-cache to allow cached components for better render performances
   * */
  cache: {
    max: 1000,
    maxAge: 900000
  },

  /**
   * Build configuration
   */
  build: {

    /*
   ** Run ESLINT on save
   */
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },

    plugins: [
      // Automatically load plugin instead of having to import or require them everywhere.
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ],

    // Lets you add modules inside the vendor.bundle.js file generated to reduce the size of the app bundle.
    // It's really useful when using external modules.
    vendor: ['axios', 'vue-cookie']
  },

  modules: [
    '@nuxtjs/toast',
    '@nuxtjs/offline',
    ['@nuxtjs/google-analytics', {ua: 'UA-101641104-1'}],
    ['@nuxtjs/axios', {
      credentials: false,
      baseURL: 'http://apimw.viecict.com',
      browserBaseURL: '',
      proxyHeaders: true,
      redirectError: {
        401: '/'
      },
      requestInterceptor: (config, {store}) => {
        config.headers.common['X-Requested-With'] = 'XMLHttpsRequest'
        return config
      }
    }]
  ],

  /**
   * Lets you define the CSS you want to set globally
   * */
  css: [
    {src: 'bootstrap/dist/css/bootstrap.css'},
    {src: 'bootstrap/dist/css/bootstrap-theme.css'},
    {src: '~/assets/scss/custom.scss', lang: 'scss'}
  ],

  // The plugins property lets you add vue.js plugins easily to your main application.
  plugins: [
    {src: '~/plugins/axios.js', ssr: true},
    {src: '~/plugins/filters.js', ssr: true},
    {src: '~/plugins/components.js', ssr: true},
    {src: '~/plugins/bootstrap.js', ssr: false},
    {src: '~/plugins/plugins-client.js', ssr: false},
    {src: '~/plugins/plugins-server.js', ssr: true},
    {src: '~/plugins/vuelidate.js', ssr: true},
    {src: '~/plugins/vue-cookie', ssr: false, injectAs: 'cookie'}
  ],

  // Nuxt.js lets you create environment variables that will be shared for the client and server-side.
  env: {
    TOKEN_AUTH: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vbXdhcGkuZGV2L2F1dGgvbG9naW4iLCJpYXQiOjE0OTI0Mzk0NjcsImV4cCI6MzMwMjg0Mzk0NjcsIm5iZiI6MTQ5MjQzOTQ2NywianRpIjoicms3VlVGbm9hVDFva3FhVCIsInN1YiI6MX0.NxQeB5B5VVKNmGTE1Tbj_tZl5231h8QeUTe8',
    API_DOMAIN: 'http://apimw.viecict.com',
    NODE_ENV: 'production',
    HOST: '127.0.0.1',
    PORT: '6969'
  },

  router: {
    middleware: ['author'],
    extendRoutes (routes, resolve) {
      let arrayRoute = router.arrayRoute(resolve)
      arrayRoute.map((item) => routes.push(item))
    }
  }
}

[Jussiadev]

I try, but it did not help (((

[mamboer]

Same problem when changing nuxt from 0.10.6 to 1.0.0.rc4, it complains This relative module was not found when building.

[Jussiadev]

And what to do?

[mamboer]

BTW, the same configuration works like a charm at v0.10.6.
Seems that the RC version of nuxt could not parse css modules properly which were installed via npm.

[Jussiadev]

How I can install nuxt v0.10.6?

Sorry, I'm first time learning nuxt((

[mamboer]

@Jussiadev
Have a try to specify the full relative path for those css modules,

module.exports = {
        head: {
            meta: [
                {charset: 'utf-8'},
                {'http-equiv': 'X-UA-Compatible', content: 'IE=edge'}
            ],
            css: [
                '~/node_modules/hover.css/css/hover-min.css',
                '~/node_modules/bulma/css/bulma.css'
            ],
            build: {
                extractCSS: true
            }

        }
};

[Jussiadev]

It did not help(((

[mamboer]

Well~ What's the error messages when running nuxt?

[mamboer]

You can provide your sample project to me if you don't mind, i can make a further exploring.

[Jussiadev]

O, thank you)
https://github.com/Jussiadev/mynuxt

[mamboer]

@Jussiadev

Your configuration is wrong, fix it as below,

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',
            "~/assets/css/style.css"
        ],
        build: {
            extractCSS: true
        }
};

[Jussiadev]

I'm remove directory HTML_design with files
"HTML_design/libs/fancybox/jquery.fancybox.css",
"HTML_design/libs/owl-carousel/assets/owl.carousel.css",
"HTML_design/style.css",
from gitHub, but in my project they exist

[Jussiadev]

It did not help(((

[mamboer]

@Jussiadev
hi, the truth is that you put the css and build as the child properties of the head, while they should be siblings.

So you have to move them out of head, the correct structure of the configuration looks like,

module.exports = {
    head...,
    css...,
    build...
}

[Jussiadev]

Thanks)))

I change nuxt on v0.10.6 and it began to work)))
But I have new problem:

I have style.css

* Start Reset */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}
fieldset, img {border: 0;}
address, caption, cite, code, dfn, th, var {font-style: normal;font-weight: normal;}
table {border-collapse: collapse;}
ol, ul {list-style: none;}
caption, th {text-align: left;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}

* {margin: 0;padding: 0;}
html {height: 100%;}
a{text-decoration: none;}
img {max-width:100%;}
li{list-style: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
input[type='submit'], a {outline: none!important;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
textarea {resize: none;}
.clr{clear:both;}

/* End Reset */

/* Start Подключение шрифтов */

/* font-family: "OpenSansRegular"; */
@font-face {
    font-family: "OpenSansRegular";
    src: url("fonts/OpenSansRegular/OpenSansRegular.eot");
    src: url("fonts/OpenSansRegular/OpenSansRegular.eot?#iefix")format("embedded-opentype"),
    url("fonts/OpenSansRegular/OpenSansRegular.woff") format("woff"),
    url("fonts/OpenSansRegular/OpenSansRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "OpenSans-Italic"; */
@font-face {
    font-family: "OpenSans-Italic";
    src: url("fonts/OpenSans-Italic/OpenSans-Italic.eot");
    src: url("fonts/OpenSans-Italic/OpenSans-Italic.eot?#iefix")format("embedded-opentype"),
    url("fonts/OpenSans-Italic/OpenSans-Italic.woff") format("woff"),
    url("fonts/OpenSans-Italic/OpenSans-Italic.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "OpenSans-Semibold"; */
@font-face {
    font-family: "OpenSans-Semibold";
    src: url("fonts/OpenSans-Semibold/OpenSans-Semibold.eot");
    src: url("fonts/OpenSans-Semibold/OpenSans-Semibold.eot?#iefix")format("embedded-opentype"),
    url("fonts/OpenSans-Semibold/OpenSans-Semibold.woff") format("woff"),
    url("fonts/OpenSans-Semibold/OpenSans-Semibold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "PTRoubleSans"; */
@font-face {
    font-family: "PTRoubleSans";
    src: url("fonts/PTRoubleSans/PTRoubleSans.eot");
    src: url("fonts/PTRoubleSans/PTRoubleSans.eot?#iefix")format("embedded-opentype"),
    url("fonts/PTRoubleSans/PTRoubleSans.woff") format("woff"),
    url("fonts/PTRoubleSans/PTRoubleSans.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

/* End Подключение шрифтов */

/* Start Body */

body {font-family: "OpenSansRegular", sans-serif;font-size: 13px;}
.select_list, .select_list_radio input[type="radio"]:checked + label, .select_list_radio input[type="radio"], .hidden {display: none;}
.border{fill:none;stroke:#333;stroke-miterlimit:10;}
.body{fill:#666;}
.body_home{fill:#333;}
.bodyW, .apple, .android, .windows{fill:#fff;}
.smart{fill:none;stroke:#fff;stroke-miterlimit:10;}
.star{fill:none;stroke:#666;stroke-miterlimit:10;stroke-width:0.75px;}
.red{fill: none;stroke: #f35001;stroke-miterlimit: 10;}
.green{fill: none;stroke: #47a847;stroke-miterlimit: 10;}
.wrap_header{height: 60px;background-color: #f5f5f5;-moz-box-shadow: 0 3px 10px rgba(204,204,204,.5);-webkit-box-shadow: 0 3px 10px rgba(204,204,204,.5);box-shadow: 0 3px 10px rgba(204,204,204,.5);}

etc.

How including this file to the nuxt?

[mamboer]

My pleasure. :)

I advice you switch nuxt back to 1.0.0-rc4, 0.10.6 will be outdate soon.

You got two choices to include style.css in nuxt,

1. Put the style.css in the css section of the configuration
2. Add a link to the file in app.html

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="ru" class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="ru" class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="ru" class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
<head>
    <link rel="stylesheet" href="path-to-your-style.css"/>
    {{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

[mamboer]

Maybe you can close this issue now )))
For further discussion on using nuxt, welcome to add my google hangouts.

[Jussiadev]

Yes)))

Thank you, very much)))

Can you give me your contacts?)

[mamboer]

@Jussiadev mamboer[AT]gmail.com

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.