Hexo: Reference css installed via npm

Created on 23 Apr 2018  ·  4Comments  ·  Source: hexojs/hexo

Environment Info

Node version(node -v): v8.10.0

Your site _config.yml (Optional):

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Karan Rajpal
description:
keywords:
author: Karan Rajpal
language: en
timezone: Asia/Kolkata

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: true # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 1
render_drafts: true
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: DD-MM-YYYY
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: customTheme

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

Your theme _config.yml (Optional):

Hexo and Plugin version(npm ls --depth 0):

[email protected] /home/karan/projects/karan-rajpal.com
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]

For question

Is there any way for me to reference bulma css that is installed via npm in my ejs file? Here's my layout file

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- Use <%= page.title %> for dynamic title -->
    <%- css('bulma.min.css') %>
    <title>
        <%= config.title %>
    </title>

    <!-- Twitter bootstrap (via cdn) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
     crossorigin="anonymous">

</head>

<body>
    <div class='container'>
        <%- body %>
    </div>
    <section class="section">
        <div class="container">
            <h1 class="title">
                Hello World
            </h1>
            <p class="subtitle">
                My first website with
                <strong>Bulma!</strong>!
            </p>
        </div>
    </section>
    <div class="timeline">
        <header class="timeline-header">
            <span class="tag is-medium is-primary">Start</span>
        </header>
        <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
                <p class="heading">January 2016</p>
                <p>Timeline content - Can include any HTML element</p>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-marker is-image is-32x32">
                <img src="http://bulma.io/images/placeholders/32x32.png">
            </div>
            <div class="timeline-content">
                <p class="heading">February 2016</p>
                <p>Timeline content - Can include any HTML element</p>
            </div>
        </div>
        <header class="timeline-header">
            <span class="tag is-primary">2017</span>
        </header>
        <div class="timeline-item">
            <div class="timeline-marker is-icon">
                <i class="fa fa-flag"></i>
            </div>
            <div class="timeline-content">
                <p class="heading">March 2017</p>
                <p>Timeline content - Can include any HTML element</p>
            </div>
        </div>
        <div class="timeline-header">
            <span class="tag is-medium is-primary">End</span>
        </div>
    </div>
</body>

</html>

I tried using the css helper but to no avail. Tried using a full path and a relative path but that didn't work either. What would be the right way to do this? I am aware that I can use the CDN link but I just want to know if it can be done like this and where I am going wrong.

Also, as a side note, you may have noticed in the above npm ls output that a lot of packages seem to be missing. Why is that? Should I worry about it?

question
Source
picture karanrajpal14

All 4 comments

Hi @karanrajpal14 😁

You can surely accomplish this:

ls node_modules/bulma/css # all the bulma files are in here

Lets make an NPM script to copy it with package.json

...
"scripts": {
  "dev": "cp node_modules/bulma/css/bulma.css themes/customTheme/source/css && hexo server --debug",
  "prd": "cp node_modules/bulma/css/bulma.min.css themes/customTheme/source/css && hexo gen"
}
...

This is just an example. You can change it to suit your needs. But npm run dev will copy the uncompressed css then run the hexo server. npm run prd (like production, prd) will copy the minified bulma css then generate.

Does that work for you?

tcrowe picture tcrowe on 25 Apr 2018

Thank you @tcrowe! That works. I just wanted to know if there's a way to reference them directly without needing to copy them.

Also, what do you suggest about the errors. Leave them be?

karanrajpal14 picture karanrajpal14 on 27 Apr 2018

I don't know what the errors mean. It's pretty common for npm list to glitch out though.

I thought of another idea. If you have stylus or sass maybe you can `@import 'node_modules/bulma/css/bulma.min.css'. Want to try and let me know? It might need some '../..' to get it to the right path.

tcrowe picture tcrowe on 27 Apr 2018
👍1

@tcrowe That worked. Thank you very much!

karanrajpal14 picture karanrajpal14 on 7 May 2018
🎉1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Helihua1992 picture Helihua1992  ·  3Comments
bearpaw picture bearpaw  ·  3Comments
yunTerry picture yunTerry  ·  3Comments
mashirozx picture mashirozx  ·  3Comments
hjmJhon picture hjmJhon  ·  3Comments