Codepen project will not deploy. SCSS doesn't load

I have a codepen that works fine here:

As a project, scss will not deploy, and the project loads with no stylesheet.

https://codepen.io/Teeke/project/live/AbamBJ

  • I’ve routed the SCSS to index.html. Will it be automatically processed?
  • The pen has CSS reset as a base. Could the be the source of the error?
  • Console returns:Error while parsing the ‘sandbox’ attribute: ‘allow-downloads’ is an invalid sandbox flag. AbamBJ:32 Unrecognized feature: ‘clipboard-read’. AbamBJ:32 Unrecognized feature: ‘clipboard-write’.

Am I developing in the wrong version of Chrome? Mozilla Firefox returns the same errors. Neither browser is the latest build.

UPDATE: I just installed the latest Chromium. The SCSS still doesn’t load in the project.

  • JS console returns:

VM61 index.js:52 Uncaught TypeError: Cannot read property ‘addEventListener’ of null at VM61 index.js:52

The start of the document uses standard, untouched codepen project boilerplate:

<!DOCTYPE html>
<html lang="en">
  
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8">
  <title>My New Project!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
</head>

The error seems unrelated to your SCSS. The error tells you that navItem is null. Make sure there is an element <a class="toggle-nav"></a> in index.html

Thanks for that. I commented <a class="toggle-nav"></a> from the HTML a while back, because the UI doesn’t need it.

Is the best method to remove a few lines of Javascript? I commented the following lines:

const navItem = document.querySelector('a.toggle-nav');

function toggleNavigation(){ this.nextElementSibling.classList.toggle('active'); }

navItem.addEventListener('click', toggleNavigation);

After removing those three elements, the code still doesn’t work, but I think I’m on the right track. The other option is to add the HTML element back in, and set it to display:none in the CSS. But I think that’s kind of hacky.

The console is not raising those errors any more, but the SCSS still doesn’t deploy.

Am I removing the wrong lines from the JS? I’ll try the HTML route now.

You have an undefined variable in the SCSS.

Error: Undefined variable Line: 305 @media (min-width: $md)

Cheers, well spotted. It’s in the media queries. I guess that means a medium screen width. Do you think 40em is the safest variable to put in there?

It’s working now… thanks.

I’m still learning the console. Did you find that bug using the elements/styles or sources window?

What’s the best CSS console tutorial in your view?

Thanks if you get the time to answer this, you saved me a lot of time.

Not sure there is a “safest” value, that is a bit of a judgment call. Bootstrap uses 768px for its md breakpoint. So depending on your font size whatever that computes to in ems.

I just forked the project and it failed to compile and gave an error message.

OK, I’ll follow those bootstrap guidelines in future. I didn’t mean ‘safest’, so much as widely accepted value.

Thanks everyone for your help. Much quicker and more thorough than other Q+A sites.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.