Nuxt.js: Import css file from node_modules

[ghost]

How include lib like milligram from node_modules?

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

[shirohana]

You can add the stylesheet paths into nuxt.config.js
Just like:

module.exports = {
  css: [
    { src: 'bulma', lang: 'sass' },
    { src: 'font-awesome/css/font-awesome.css', lang: 'css' }
  ]
}

https://nuxtjs.org/api/configuration-css

[Addonmis]

module.exports = {
head: {
title: 'Shop',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
},
css: [
{src: 'bulma', lang: "sass"}
],
build: {
vendor: ['axios']
}
}

"bulma": "^0.4.3"
this does not work
console:

ERROR  Failed to compile with 1 errors                                     21:46:14

This dependency was not found:

* bulma in ./~/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":true}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue

To install it, you can run: npm install --save bulma

[shirohana]

Which version of nuxt you used?

There's no problem with [email protected], you can change to this version temporary until the error been solved.

[Addonmis]

"nuxt": "^1.0.0-alpha1"

If I change the version, something can stop working?

[shirohana]

Probably, no?

Just give it a try ヾ(*´ω｀*)ノ

I'm comparing diffs between two tags.

[Addonmis]

Promises ceased to work)

new _nuxt2.default(config).then(function (nuxt) {
                           ^

TypeError: (intermediate value).then is not a function
    at Object.<anonymous> (/home/addonmis/shop/server/server.js:45:18)
    at Module._compile (module.js:569:30)
    at loader (/home/addonmis/shop/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/addonmis/shop/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at Object.<anonymous> (/home/addonmis/shop/node_modules/babel-cli/lib/_babel-node.js:154:22)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)

[shirohana]

I thing the Nuxt API is the most important changes, like returning a Promise from new Nuxt().

Here's the Issue: https://github.com/nuxt/nuxt.js/issues/754

[Addonmis]

On the version of "nuxt": "^ 1.0.0-alpha1" worked fine. With out to connecting the CSS (bulma)

[shirohana]

For some reason, constructor should not returns a Promise, and it has been fixed in v1.0.0-alpha.3 (https://github.com/nuxt/nuxt.js/commit/c5ca8c64f18d29b83137399b2aa5f6164f53b3c6).

If you're working with Nuxt API, upgrade your Nuxt version to v1.0.0-alpha.3 or above.

I'm trying to find out why your first problem occurred.

[pi0]

As a complement to @shirohana 's answer, you may want to clean node_modules As a bug of yarn/npm when upgrading from alpha2 ~> alpha.3 (Also latest available alpha is 5)

[Addonmis]

Now I have installed"nuxt": "^ 1.0.0-alpha1", it does not work correctly?

[Addonmis]

Ok, read the comment above. I'll try

[Addonmis]

On the version "1.0.0-alpha.5" also does not work CSS connections

[shirohana]

I think maybe this is the related commit, I'm trying to understand how it works.

https://github.com/nuxt/nuxt.js/blob/master/lib/webpack/vue-loader.config.js

[shirohana]

This is the critical commit:

commit e2e849fbd2ebcd2c475d73efe2186f4cf189e0d7
Author: Pooya Parsa <[email protected]>
Date:   Fri May 5 18:40:12 2017 +0430

    [vue-style-loader] Inline global css on SSR

    Currently with `<style src>` approach global styles are injected on
    runtime only and this may affect page render performance.

[pi0]

@shirohana This an old commit and lot's of improvements in vue-loader and webpack are also applied. As new upcoming docs, items in css[] array are imported using webpack instead of <style src> trick so that their loader. Would you please share your nuxt config and exact error encounter with dev branch? I may help on this better then.

[shirohana]

Thank you for helping இωஇ

First I add [email protected] and bulma@^0.4.3 to my project, and here's my configuration:

// nuxt.config.js
module.exports = {
  css: [
    { src: 'bulma', lang: 'sass' }
  ]
}

<!-- pages/index.vue -->
<template>
  <h1>Hello</h1>
</template>

and here's the problems I got from my browser:
(no Errors occurred in my console)

/home/shirohana/Repositories/test2/node_modules/bulma/bulma.sass:2
@charset "utf-8"
^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at r (/home/shirohana/Repositories/test2/node_modules/nuxt/node_modules/vue-server-renderer/build.js:7732:16)
    at Object.module.exports._vm (webpack:/external "bulma":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap f3b304bbe89243aba1db:25:0)
    at Object.<anonymous> (server-bundle.js:1867:64)
    at __webpack_require__ (webpack:/webpack/bootstrap f3b304bbe89243aba1db:25:0)
    at Object.<anonymous> (server-bundle.js:1832:187)
    at __webpack_require__ (webpack:/webpack/bootstrap f3b304bbe89243aba1db:25:0)

[Addonmis]

Have you started the server?

[pi0]

That's because you need to use compiled css version like this :)

module.exports = {
  css: [
    'bulma/css/bulma.css'
  ]
}

[Addonmis]

It works, thanks)

[shirohana]

It seems it cannot distinguish the source file type correctly,

if I provide the full path with extension exactly (like: css: ['bulma/bulma.sass']), it would work!

although it's just in bulma/package.json..

  main: 'bulma.sass',

And the lang property seems unnecessary now.

[pi0]

Exactly. That's because all css items are being rendered in index.js like this:

import 'bulma/bulma.sass'

[shirohana]

Maybe we can read the main property in package.json automatically,

and is this a extra ? before sourceMap in vue-loader.config#L20 ?

https://github.com/nuxt/nuxt.js/blob/master/lib/webpack/vue-loader.config.js#L20

[pi0]

Haha nice catch :neckbeard: Would be nice if you make a PR for that.

[shirohana]

Good news ฅ' ω 'ฅ

Now you can import your styles from module directly just like:

module.exports = {
  css: [ 'bulma' ]
}

and now Nuxt will use import 'bulma/bulma.sass' instead of import 'bulma' which belongs to main property of bulma/package.json, and webpack loader will work as expected ヾ(*´ω｀*)ノ

pull request preparing

[heishung]

hi ! i need help include file xxx.js in to nuxtjs ?

[shirohana]

What do you mean about include file xxx.js in to nuxtjs?

Global require? Nuxt Plugin

Require from CDN?

// nuxt.config.js
const defer = 'defer'

module.exports = {
  head: {
    script: [
      { defer, src: 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js' }
    ]
  }
}

[heishung]

script: [
{ src: './assets/js/pushy.min.js' }
]

nuxt:render Rendering url /assets/js/pushy.min.js +105ms
{ statusCode: 404, message: 'This page could not be found' }

[shirohana]

You should put your pushy.min.js into ./static/js/pushy.min.js and modify nuxt.config.js like:

module.exports = {
  head: {
    script: [
      { src: 'js/pushy.min.js' }
    ]
  }
}

Files under ./static will solves to /

Here's the Nuxt.js directory structure tutorial: https://nuxtjs.org/guide/directory-structure

[heishung]

It works, thanks :)

[foundryspatial-duncan]

Can we use this syntax, with a tilde character, either in scss or css with nuxt?

@import '~mapbox-gl/dist/mapbox-gl.css';

[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.