question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stylesheets placed in `styles` directory aren't referenced/used on website

See original GitHub issue

Summary

I made a stylesheet: styles/website.css. This stylesheet should be referenced on the website.

  • HonKit version: 3.5.1

Steps to reproduce

  1. Install HonKit and run yarn run honkit init
  2. Do something that would normally be styled by CSS (e.g., add an img tag with a certain class attribute).
  3. Create a styles/website.css file and add to it.
  4. Create a book.json file with contents below.
  5. Run yarn run honkit serve and navigate to the appropriate webpage.
  • Link to code example:
book.json contents
{}
package.json contents
{
  "name": "honkit-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "honkit": "^3.5.1"
  },
  "scripts": {
    "build": "honkit build",
    "serve": "honkit serve"
  }
}
Directory structure
.
├── README.md
├── SUMMARY.md
├── _book
├── book.json
├── node_modules
├── package.json
├── styles
└── yarn.lock

3 directories, 5 files

Expected results

The stylesheet should be included in the HTML source code, with its style changes being implemented onto the site.

Actual results

The stylesheet is not included in the HTML source code.

Output of $ yarn run build --log=debug
yarn run v1.22.4
$ honkit build --log=debug
debug: readme found at README.md 
debug: summary file found at SUMMARY.md 
debug: cleanup folder "/Users/padraicfanning/Documents/honkit-demo/_book" 
info: 5 plugins are installed 
info: 5 explicitly listed 
info: plugin "highlight is loaded
info: plugin "search is loaded
info: plugin "lunr is loaded
info: plugin "fontsettings is loaded
info: plugin "theme-default is loaded
info: found 1 pages 
info: found 3 asset files 
debug: calling hook "config" 
debug: calling hook "init" 
debug: copy assets from theme /Users/padraicfanning/Documents/honkit-demo/node_modules/@honkit/honkit-plugin-theme-default/_assets/website 
debug: copy resources from plugin /Users/padraicfanning/Documents/honkit-demo/node_modules/gitbook-plugin-fontsettings/assets 
debug: copy resources from plugin /Users/padraicfanning/Documents/honkit-demo/node_modules/gitbook-plugin-lunr/assets 
debug: copy resources from plugin /Users/padraicfanning/Documents/honkit-demo/node_modules/gitbook-plugin-search/assets 
debug: copy resources from plugin /Users/padraicfanning/Documents/honkit-demo/node_modules/gitbook-plugin-highlight/css 
debug: copy asset "package.json" 
debug: copy asset "styles/website.css" 
debug: copy asset "yarn.lock" 
debug: calling hook "finish:before" 
debug: calling hook "finish" 
debug: write search index 
info: >> generation finished with success in 1.9s ! 
✨  Done in 8.41s.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
azucommented, Jul 5, 2020

We have released https://github.com/honkit/honkit/releases/tag/v3.5.2. It will fix this issue.

Please try it 😃

npm install honkit@latest
npx honkit build --reload
0reactions
azucommented, Nov 29, 2020

Pages you want to show should be defined in SUMMARY.md. https://honkit.netlify.app/pages.html

Read more comments on GitHub >

github_iconTop Results From Across the Web

Style Sheets in HTML documents - W3C
Placing style sheets in separate files makes them easy to reuse. Sometimes it's useful to include rendering instructions within the document to which...
Read more >
Complete list of reasons why a css file might not be working
Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab...
Read more >
How to fix CSS not linking to your HTML document
A guide on linking CSS to your HTML document. ... omit the rel attribute from the <link> tag then the style won't be...
Read more >
Use CSS isolation in your Blazor projects - Dave Brock
Use CSS isolation in your Blazor projects. We talk about scoping your CSS to your Blazor components—all without a stylesheet reference.
Read more >
Adding CSS and JavaScript to an Angular CLI Project
Use. Any CSS files you want to add that you won't be referencing from your ... you apply styles to components within your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found