我用简单的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/[email protected]/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文件,但无法正常工作。
有人有解决方案吗?
您只能“导入” css文件。 SCSS和co是预处理器,它们采用自定义语法并将其转换为CSS。因此,您必须将SCSS转换为CSS,然后像常规CSS一样<link>
在HTML中将其转换(bc。就是这样。)
您不会将SASS / SCSS文件直接导入HTML文件。您的SCSS将被编译为.css文件,而您将包含该css文件。
我建议您查找有关SCSS的一些教程。
您不能直接在html中导入scss文件,因为html只是读取css文件,您需要通过gulp或webpack将sass文件强制为css的代码
SASS文件的扩展名是.scss