0

I call chartist.css and chartist.js yet my css files seem to be reading from chartist.scss and I don't know why. I have downloaded the files from here: https://github.com/gionkunz/chartist-js/tree/master/dist and reference them as below

<!-- Chartist CSS -->
<link rel="stylesheet"
      href="chartist/dist/chartist.css">

<script src="chartist/dist/chartist.min.js"></script>

If I add custom css to my chartist.css file it doesn't override the data as it seems to say I am editing chartist-settings.scss (when I click f12 inspect in Chrome). It also says that the CSS being used is chartist.scss when that is not what I reference as seen above.

I am trying to edit my charts with my own CSS but unsure on how to do so. I am not familiar with SCSS or Sass and trying to simply call and edit the CSS file.

JDT
  • 965
  • 2
  • 8
  • 20
  • Chrome defaults to showing CSS source maps now. If you follow the instructions in that answer, you'll find the settings page where JavaScript and CSS source maps are configured. Disable source maps my unchecking "Enable CSS source maps" under the "Sources" heading. – Joseph Marikle Sep 11 '18 at 21:10
  • Is there a way to disable this code side? Otherwise, won't different viewers see it differently depending on if they have source maps disabled or not? – JDT Sep 11 '18 at 21:14
  • You could link to the minified version instead, which doesn't appear to include the reference to the source map: ``. If you look at `chartist.css`, you'll see at the bottom there's a comment `/*# sourceMappingURL=chartist.css.map */`. That comment is how chrome knows where to look for the source map. If that isn't there (which it isn't in the minified version), the source map shouldn't be found. – Joseph Marikle Sep 11 '18 at 21:16
  • Also, as an aside, you appear to be loading the script just fine, but typically you would want to use an absolute URL for your css and javascript files. Rather than `chartist/dist/chartist.css`, you might want to use `/chartist/dist/chartist.css`. Notice the leading `/` character. – Joseph Marikle Sep 11 '18 at 21:19
  • I deleted the css.map file which also worked, why would the `/` change anything? The minified version would be difficult to edit no? – JDT Sep 11 '18 at 22:22
  • Deleting the map file may be less ideal. Chrome will still try to download the file and will just fail to do so, which is a waste of load time. I usually suggest using absolute URLs because logic errors might occur. Your path might work on the homepage (mysite.test for instance) evaluating to `mysite.test/chartist/dist/chartist.css`, but on mysite.test/about-us/ the path would become `mysite.test/about-us/chartist/dist/chartist.css`, which is likely not intended. Adding the `/` corrects that behavior. – Joseph Marikle Sep 12 '18 at 13:14
  • It would be difficult to edit a minified file and I don't recommend it. I also don't recommend editing the chartist.css file either. Instead you should be including a new, separate file that has styles that override the original. That would be the ideal approach. – Joseph Marikle Sep 12 '18 at 13:17
  • How would I cause priority.css to override the original? – JDT Sep 12 '18 at 15:27
  • You would place the link to it after the `` tag. So `` or whatever on the next line down. – Joseph Marikle Sep 12 '18 at 17:14

0 Answers0