如何将 SCSS 文件导入 HTML 文件
use*_*143 -3 html sass scss-mixins
我用简单的 HTML 和 SCSS 创建了一个简单的网站项目。
HTML 文件看起来像这样：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="../../node_modules/bulma/bulma.sass">
<link rel="stylesheet" href="../../node_modules/bulma/css/bulma.css">
<link rel="stylesheet/scss" type="text/css" href="./header.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div class="header">
<div class="columns header-contents">
<div class="column is-four-fifths">
<div class="header-logo">
hier ist logo
</div>
<div class="header-title"> Title</div>
<div class="title-content">content</div>
</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
</div>
</body>
</html>
我现在想将 SCSS 文件导入到这个 HTML 文件中，但它不起作用。
有人有一些解决方案吗？
如果您使用 VSCode，您可以安装“Live SASS Compiler”
然后你可以创建一个 .scss 文件并点击右下角的“Watch Sass”
它会将您的 .scss 文件编译成一个 .css 文件，您可以将其导入到您的 HTML 文档中。
小智 5
浏览器不会自动识别SCSS文件，您需要先将此类文件编译为CSS。如果您是Node.js用户，可以通过运行以下命令来安装SASS编译器：
npm install -g sass
然后通过运行以下命令编译 SCSS 文件：
sass input.scss output.css
现在您可以链接output.css到您的 HTML 文件中。
您只能“导入”css 文件。SCSS 和 co 是预处理器，它们采用自定义语法并将其转换为 CSS。因此，您必须将 SCSS 转换为 CSS，然后<link>像常规 CSS 一样将其转换为 HTML（bc。就是这样。）
| 归档时间： |
|
| 查看次数： |
10701 次 |
| 最近记录： |