The element selector for the <code> tag is not recognized in SCSS

Question

The element selector for the <code> tag is not recognized in SCSS

Update on 2020/02/23: I have made some additions to my project. Apologies for the lack of information provided earlier.

The project I am working on is a modified version of the [Gatsby + Netlify CMS Starter][1].

In the process, I swapped out all.sass with all.scss.

For styling, I'm utilizing node-sass 4.11.0.

While attempting to compile a .scss file as shown below, I encountered an issue:

body {
  background-color: #000000;
}

code {
  background-color: #ffffff;
}

My expectation was to generate CSS for both the <body> and <code> elements.

However, only the styles for the body element were being output. The actual output looked like this:

body {
  background-color: #000000; }

I'm puzzled as to why the selector for the <code> tag seems to be ignored. Any insights would be greatly appreciated.

css sass

Answer 1

Answer №1

After some troubleshooting, I finally found the solution to my issue.

To my surprise, it turned out that the problem was not caused by the sass compiler as I initially suspected.

In fact, the culprit was a plugin called Gatsby Plugin Purgecss, which was mistakenly purging the <code> blocks in my project.

I had overlooked the fact that Purgecss considered the <code> selector unnecessary because the HTML file generated from markdown contained the <code> tag.

As stated here, Purgecss only scans for selectors within the src folder by default.

Answer 2

After some troubleshooting, I finally found the solution to my issue.

To my surprise, it turned out that the problem was not caused by the sass compiler as I initially suspected.

In fact, the culprit was a plugin called Gatsby Plugin Purgecss, which was mistakenly purging the <code> blocks in my project.

I had overlooked the fact that Purgecss considered the <code> selector unnecessary because the HTML file generated from markdown contained the <code> tag.

As stated here, Purgecss only scans for selectors within the src folder by default.

Answer 3

Answer №2

Are your code tags correctly placed within the body?

Please make sure that they are with the following code:

body {
  background-color: #ccc;
}

code {
  background-color: #fff;
}

<body>
  <code>
        teste
      </code>
  </body

Check it out on this link: https://codepen.io/novasdream/pen/Exjgqgg

If you notice any issues, please view them here: https://codepen.io/novasdream/pen/dyopxpV

Answer 4

Are your code tags correctly placed within the body?

Please make sure that they are with the following code:

body {
  background-color: #ccc;
}

code {
  background-color: #fff;
}

<body>
  <code>
        teste
      </code>
  </body

Check it out on this link: https://codepen.io/novasdream/pen/Exjgqgg

If you notice any issues, please view them here: https://codepen.io/novasdream/pen/dyopxpV

The element selector for the <code> tag is not recognized in SCSS

Answer №1

Answer №2

Similar questions

Efficiently adjusting the height of a sticky sidebar

Disarrayed image in absolute position on my webpage

Boost website performance with Google Page Speed by optimizing CSS above the fold using this innovative Bootstrap Template Plugin

What could be causing my hover effect to function exclusively on Chromium-based browsers and not on Firefox?

What is the recommended method for choosing text colors when creating GUI for app development?

Having several horizontal scrollbars at once on a single webpage

The flex-wrap property with a value of "nowrap" does not seem to

`A problem with HTML element display in Internet Explorer versions 8 and 9 involving <p> and <h2> tags`

The "if" statement carries out the identical action each time it is executed

Creating a customized design for your jQuery UI modal dialog box using CSS

What is the best way to showcase my products in a horizontal line? I am seeking a solution using PHP and Bootstrap to exhibit all the items retrieved

Replacing one <div> with another <div> using a clickable link within the divs

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

Utilizing JavaFX 2 with a touch of CSS styling

The applied style of NextUI Components may be inconsistent, appearing to not apply in certain instances even though it does work

Should WordPress files be kept separate (php, css, and js) or combined into a single file?

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

Automatically add shimmer with CSS styling

Troubleshooting: CSS property "background-color" malfunctioning

Having trouble with Jquery's .mouseover() method? Let's catch the solution!