# Help: Chart.js in stylesheet

**URL:** <https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887>\
**Category:** support\
**Created:** [August 9, 2017, 10:13am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887 "2017-08-09T10:13:39Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [August 9, 2017, 10:13am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/1 "2017-08-09T10:13:40Z")

</div>

Hi, I just deployed Hugo site at Netlify. The index page [here](https://cutter-robin-15288.netlify.com/) looks ok but the other pages like [this](https://cutter-robin-15288.netlify.com/projects/beringin-golf-residence/) does not seem to render properly. It works on my localhost.

One difference that catches my attention is this line. Why is there `chart.js` on the page that’s not rendered properly?  
`<link rel='stylesheet' type='text/css' media='all' href='https://d33wubrfki0l68.cloudfront.net/js/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc/{$rootfolder}/assets/js/chart.js'/>`

Here’s the deployment log

```auto
4:49:05 PM: Build started
4:49:05 PM: Fetching cached dependencies
4:49:06 PM: Starting to download cache of 32.5MB
4:49:06 PM: Finished downloading cache in 441.862835ms
4:49:07 PM: Preparing Git Reference refs/heads/netlify-hugo-version
4:49:10 PM: Found netlify.toml. Overriding site configuration
4:49:11 PM: Running build command: hugo
4:49:14 PM: v6.11.2 is already installed.
4:49:15 PM: Now using node v6.11.2 (npm v3.10.10)
4:49:15 PM: Using version v6.11.2 of node
4:49:15 PM: Using /opt/buildhome/.rvm/gems/ruby-2.4.0
4:49:15 PM: Set ruby from .ruby-version
4:49:15 PM: Started building sites ...
4:49:15 PM: Built site for language en:
0 of 1 draft rendered
4:49:15 PM: 0 future content
0 expired content
4:49:15 PM: 1 pages created
0 non-page files copied
4:49:16 PM: 0 paginator pages created
4:49:16 PM: 5 tags created
4:49:16 PM: 0 categories created
total in 19 ms
4:49:16 PM: Build complete: exit code: 0
4:49:16 PM: Cleaning up docker container
4:49:16 PM: Starting to deploy site from 'public'
4:49:16 PM: Deploying to CDN
4:49:16 PM: Starting deploy of directory /mnt/build-work/buildbot-855617200/repo/public
4:49:17 PM: Going to deploy the 0 required files
4:49:17 PM: Finished deploying directory /mnt/build-work/buildbot-855617200/repo/public
4:49:17 PM: Finished deploying 0 files in 639.391309ms
4:49:17 PM: Starting post processing
4:49:17 PM: Cleaning up the repository
4:49:17 PM: Post processing done
4:49:17 PM: Site is live
4:49:17 PM: Bundling and saving cache
4:49:22 PM: Finished uploading cache in 605.895732ms
4:49:23 PM: Finished processing build request in 17.596443088s

```

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [August 9, 2017, 10:53am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/2 "2017-08-09T10:53:13Z")

</div>

As this is most likely a problem in your template(s), it is hard to guess without seeing the … templates.

---

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [August 9, 2017, 12:49pm UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/3 "2017-08-09T12:49:48Z")

</div>

Thanks for looking, Erik (@bep) . Site repo is [here](https://github.com/vinamelody/sam)

---

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [August 9, 2017, 3:42pm UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/4 "2017-08-09T15:42:58Z")

</div>

Update: Netlify asked me to disable asset optimization and it works… but I just wonder … as @bep said … something is wrong with my template… and to my suspicion…

I have 2 static folders, first, in `/static/` where I store image for archetype posts `/static/img` and second in `/themes/space/static` where I store theme’s static files

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [August 10, 2017, 4:26am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/5 "2017-08-10T04:26:46Z")

</div>

> [@vinamelody](#):
>
> \<link rel=‘stylesheet’ type=‘text/css’ media=‘all’ href=‘[https://d33wubrfki0l68.cloudfront.net/js/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc/{$rootfolder}/assets/js/chart.js](https://d33wubrfki0l68.cloudfront.net/js/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc/%7B$rootfolder%7D/assets/js/chart.js)’/\>

I think it’s a couple things:

1. You’re linking JavaScript as a stylesheet. This should be `<script src="`…, no?
2. Also wondering what `{$rootfolder}` is since that’s not Hugo syntax. Assuming this is just an issue with Netlify’s asset optimization since they are using Cloudfront as part of their CDN for that particular asset, which is a conflict between mime type and type text/css.

Other than that, I don’t see anything wrong with the templating, since you are using your `space` theme and not overriding anything in the project-level layouts/partials folder…

---

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [August 10, 2017, 4:47am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/6 "2017-08-10T04:47:11Z")

</div>

Originally, the css codes are

```auto
<link href="css/stack-interface.css" rel="stylesheet" type="text/css" media="all">
        <link href="css/socicon.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/iconsmind.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/flickity.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700" rel="stylesheet">

```

Somehow, Netlify’s asset optimization changed it to `<link rel=‘stylesheet’ type=‘text/css’ media=‘all’ href=‘https://d33wubrfki0l68.cloudfront.net/js/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc/{$rootfolder}/assets/js/chart.js’/>`

However, `index.html` page got it right. This is what confusing me the most …

---

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [August 12, 2017, 6:55am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/7 "2017-08-12T06:55:04Z")

</div>

Update! this is somewhat “enlightening” to me … the trick that works with Netlify’s asset optimization is to put my theme’s css,js,font,images under 1 folder called `asset` ! with this, Netlify is somehow understand.

Now my folder structure looks like this

```auto
.
├── README.md
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── projects
│ ├── 001.md
│ └── 002.md
├── layouts
├── netlify.toml
├── static
│ └── img
│ └── projects
│ └── 001
│ ├── featured.jpg
└── themes
    └── space
        ├── LICENSE.md
        ├── archetypes
        │ ├── default.md
        │ └── projects.md
        ├── layouts
        │ ├── 404.html
        │ ├── _default
        │ │ ├── baseof.html
        │ │ ├── list.html
        │ │ └── single.html
        │ ├── index.html
        │ ├── partials
        │ │ ├── footer
        │ │ ├── head
        │ │ ├── header
        │ │ ├── home
        │ │ └── projects
        │ └── projects
        │ ├── list.html
        │ └── single.html
        ├── static
        │ └── assets
        │ ├── css
        │ ├── fonts
        │ ├── img
        │ └── js
        └── theme.toml

```

---

<div class="post-metadata">

**Author:** ![verythorough](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/verythorough/32/3251_2.png) [@verythorough](https://discourse.gohugo.io/u/verythorough)\
**Post date:** [August 12, 2017, 9:44pm UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/8 "2017-08-12T21:44:02Z")

</div>

As it turns out, the issue appears to be with the html `<base>` tag, which I’ve just learned causes confusion for Netlify’s postprocessing.

@vinamelody, Looking at the commit you made to move files into an assets folder, I see you also replaced the theme’s header template (which uses a `<base>` tag) with a new header that doesn’t. I suspect that’s the change that made everything work properly.

---

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [August 13, 2017, 12:17am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/9 "2017-08-13T00:17:04Z")

</div>

oh really! that’s unexpected haha i looked at other templates and when I follow [https://github.com/rdwatters/theme-starter-hugo](https://github.com/rdwatters/theme-starter-hugo) , it worked…😃

Thanks for sharing the info!

---

<div class="post-metadata">

**Author:** ![brandonmp](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@brandonmp](https://discourse.gohugo.io/u/brandonmp)\
**Post date:** [August 27, 2017, 12:36am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/10 "2017-08-27T00:36:55Z")

</div>

Having exact same issue in a React project (no connection at all to Hugo), so I can confirm that this is a Netlify thing.

Just wanted to pile-on here since this is the only mention of this particular problem I’ve found so far

---

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [August 27, 2017, 12:52pm UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/11 "2017-08-27T12:52:21Z")

</div>

Hi @brandonmp may be one of your project config has similar solution regarding the assets bundling too…

---

<div class="post-metadata">

**Author:** ![omar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/omar/32/4211_2.png) [@omar](https://discourse.gohugo.io/u/omar)\
**Post date:** [September 23, 2017, 7:33am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/12 "2017-09-23T07:33:20Z")

</div>

I’m having the same issue, using the Victor Hugo template.  
This is my [repo](https://github.com/omar-jalalzada/portfolio5) and this is my [site](http://omar.netlify.com/). Homepage CSS worked but project page fails. (currently project pages work because Asset Optimization is off)

* * *

Turning off the Asset Optimization fixes the issue. But thats one of the main reasons I’m using Netlify instead of Github pages. I’m only beginning to learn about Gulp and Webpack so I’m suspicious on how the Victor Hugo template is setup. Am I missing something in my `webpack.conf.js`? (its located in the root of my repo)

---

<div class="post-metadata">

**Author:** ![fvcproductions](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fvcproductions/32/4612_2.png) [@fvcproductions](https://discourse.gohugo.io/u/fvcproductions)\
**Post date:** [December 5, 2017, 2:57am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/14 "2017-12-05T02:57:55Z")

</div>

Any insight into this would be great because I’m facing the same issue with the same starter pack of Victor Hugo.

---

<div class="post-metadata">

**Author:** ![vinamelody](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vinamelody/32/3811_2.png) [@vinamelody](https://discourse.gohugo.io/u/vinamelody)\
**Post date:** [December 7, 2017, 12:46am UTC](https://discourse.gohugo.io/t/help-chart-js-in-stylesheet/7887/15 "2017-12-07T00:46:43Z")

</div>

@omar try to put your js and css under `assets` folder or if there’s any `<base>` tag, remove it