目录

hugo 修改主题 scss 样式

scss 与 css 文件路径

  • html

    站点主题的所有 html 模板文件：themes\tranquilpeak\layouts

  • SCSS

    主题 scss 文件在 themes\tranquilpeak\src\scss。

    入口 scss 文件：themes\tranquilpeak\src\scss\tranquilpeak.scss。

  • CSS

    主题 scss 文件编译后 themes\tranquilpeak\static\css。

修改

如果是新增 scss 文件，需要在入口 scss 文件tranquilpeak.scss导入对应新增 scss 文件：

@import 'layouts/about',
'layouts/blog',
'layouts/bottom-bar',
'layouts/cover',
'layouts/footer',
'layouts/header',
'layouts/main',
'layouts/sidebar',
'layouts/share-9ong';

如何快速编译 scss

以前通常需要安装 npm 等命令行工具，现在可以通过在线编译工具，直接在浏览器中编译 scss 文件。

详见后续章节：vscode 在线编译 scss

vscode 在线编译 scss

在 Visual Studio Code (VSCode) 中，你可以使用插件来编译整个 SCSS 文件目录到指定的 CSS 文件目录。一个常用的插件是 Live Sass Compiler。以下是详细步骤：

1. 安装 Live Sass Compiler 插件

  1. 打开 VSCode。
  2. 点击左侧活动栏中的扩展图标（四个方块组成的图标）。
  3. 在搜索框中输入 Live Sass Compiler。
  4. 找到 Live Sass Compiler 插件并点击安装。

2. 配置 Live Sass Compiler

  1. 安装完插件后，打开你的项目文件夹。
  2. 在项目根目录下创建一个 settings.json 文件（如果还没有的话），路径通常是 .vscode/settings.json。
  3. 在 settings.json 文件中添加以下配置：
{
    "liveSassCompile.settings.formats": [
      {
        // "format": "expanded",
        "format": "compressed",
        "extensionName": ".css",
        "savePath": "\\themes\\tranquilpeak\\static\\css"
      }
    ],
    "liveSassCompile.settings.watchOnSave": true,
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.autoprefix": "> 1%, last 2 versions"
    
  }

3. 配置说明

  • liveSassCompile.settings.formats:

    • format: 输出的 CSS 格式，可以是 expanded、compressed 等。
    • extensionName: 输出文件的扩展名，通常是 .css。
    • savePath: 输出文件的保存路径，相对于项目根目录。例如，/dist/css 表示输出到 dist/css 目录。

  • liveSassCompile.settings.generateMap:

    • 是否生成源映射文件（.map），默认为 false。

  • liveSassCompile.settings.autoprefix:

    • 自动添加浏览器前缀的配置，使用 Browserslist 语法。

4. 编译 SCSS 文件

  1. 打开 VSCode 的命令面板（按 Ctrl+Shift+P 或 Cmd+Shift+P）。
  2. 输入 Live Sass: Watch Sass 并选择它。
  3. 选择你要编译的 SCSS 文件或文件夹。

5. 自动编译

  1. 如果你希望在保存 SCSS 文件时自动编译，可以在 settings.json 中添加以下配置：
{
  "liveSassCompile.settings.watchOnSave": true
}

6. 示例项目结构

假设你的项目结构如下：

my-project/
├── .vscode/
│   └── settings.json
├── assets/
│   └── scss/
│       └── styles.scss
└── dist/
    └── css/
        └── styles.css

7. 测试编译

  1. 修改 assets/scss/styles.scss 文件，例如：
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}
  1. 保存文件，检查 dist/css/styles.css 是否已生成并包含编译后的 CSS 代码。

总结

通过上述步骤，你可以在 VSCode 中使用 Live Sass Compiler 插件来编译整个 SCSS 文件目录到指定的 CSS 文件目录。这样可以提高开发效率，确保你的样式表始终保持最新。

9ong@TsingChan 2024 markdown