为什么此样式代码在样式标签之间不起作用？答案

【问题标题】：Why does this styling code not work between style tags?为什么此样式代码在样式标签之间不起作用？
【发布时间】：2019-12-03 18:26:57
【问题描述】：

我正在尝试使用 ContextMenu.js 来显示一个弹出菜单，但此代码不起作用。我从这里获取了这段代码：https://codepen.io/Iamafro/pen/bLqyGd

我想要相同的功能，但是当我将它写入单个文件时它不起作用。这种格式：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script> all the java script code from above link goes here </script>
  <style> all the css code from above link goes here </style>
</head>
<body>
   all the html code from above link goes here
</body>
</html>

【问题讨论】：

请发布您的完整代码。另请注意，该示例具有 SCSS 而不是 CSS 代码。如果没有一些额外的东西，简单地把它放在一个样式标签中肯定是行不通的。
要查看编译的 CSS 代码，您可以单击 Codepen 上 CSS 窗口中的向下箭头。然后您可以将该代码放在样式标签中。
这个问题其实不是contextmenu.js，甚至不是编码问题。这就是为什么 Codepen 的样式代码在样式标签中不起作用的原因。

标签： javascript jquery html css web

【解决方案1】：

它没有按您期望的方式工作，因为 Codepen 上显示的样式代码是 SCSS，而不是 CSS。在呈现给浏览器之前需要将其编译为 CSS。

在 Codepen 上打开样式窗口右上角的菜单以显示编译后的 CSS。

你可以把CSS代码放在<style></style>标签之间，就可以了。

如果你想使用 SCSS，你必须在服务器上对其进行预处理。

【讨论】：

【解决方案2】：

你在正文之前保留了脚本，所以它没有找到元素，因为它不存在。

将格式更新为：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style> all the css code from above link goes here </style>
</head>
<body>
   all the html code from above link goes here
<script> all the java script code from above link goes here </script>
</body>
</html>

此外，您必须对编写的 SCSS 进行预处理，以便正确获取 CSS。

【讨论】：