📌  相关文章
📜  使用 node-sass 压缩 scss - Html (1)

📅  最后修改于: 2023-12-03 15:22:14.689000             🧑  作者: Mango

使用 node-sass 压缩 SCSS - HTML

当你需要在你的项目中使用 SCSS，并需要将其压缩以减少文件大小时，node-sass 是一个非常好用的工具。

以下是使用 node-sass 压缩 SCSS 文件的步骤：

1. 安装 node-sass

首先，你需要安装 node-sass。打开终端，运行以下命令：

npm install node-sass --save-dev
2. 编写 SCSS 文件

在你的项目中，你可以创建一个 .scss 文件，例如 style.scss。在这个文件中，你可以编写你的 SCSS 代码。

3. 压缩 SCSS 文件

使用 node-sass 压缩 SCSS 文件非常容易。在终端中，运行以下命令：

node-sass style.scss style.min.css --output-style compressed

这个命令会将 style.scss 压缩，并生成一个新的文件 style.min.css。

4. 集成到 HTML

最后，你需要引入压缩后的 CSS 文件到你的 HTML 页面中。

<link rel="stylesheet" href="style.min.css">

现在你已经成功地使用 node-sass 压缩了你的 SCSS 文件，并将其应用到你的 HTML 页面中。

代码片段：

以下是 style.scss 的示例代码：

$primary-color: #F44336;

body {
  background-color: #FFF;
  color: $primary-color;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

以下是终端中的命令和输出示例：

$ node-sass style.scss style.min.css --output-style compressed

> style.min.css                              // 生成的文件名
  style.scss                                  // 原始的 SCSS 文件
  style.min.css.map                            // 文件的 sourcemap
  244B  style.scss
  198B  style.min.css

以下是将压缩后的文件引入到 HTML 页面的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
    <link rel="stylesheet" href="style.min.css">   // 引入压缩后的文件
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my page.</p>
  </body>
</html>

以上是使用 node-sass 压缩 SCSS 文件并将其应用到 HTML 页面中的完整流程。