如何使用EJS渲染动态CSS？

核心思路 #

EJS本质是模板解析引擎，并不局限于HTML——你完全可以用它来渲染CSS文件，只需要让Node.js把CSS文件当作EJS模板处理，渲染后再以text/css的响应头返回给客户端，这样就能在CSS里用<%= %>或<% %>插入动态值（比如主题颜色）。

方案一：用EJS模板渲染CSS #

1. 配置Node.js（以Express为例）

确保EJS作为视图引擎，并且视图目录能访问到你的CSS模板文件：

const express = require('express');
const app = express();

// 设置EJS为视图引擎
app.set('view engine', 'ejs');
// 指定视图目录（根据你的项目结构调整）
app.set('views', './views');

2. 创建EJS格式的CSS模板

新建views/styles.ejs文件，嵌入EJS语法来插入动态值：

body {
  background-color: <%= bgColor %>;
  color: <%= textColor %>;
  transition: background-color 0.3s ease;
}

.header {
  background-color: <%= accentColor %>;
  color: white;
}

/* 其他需要动态调整的样式 */

3. 编写路由处理动态CSS请求

在路由中获取用户的主题设置（比如从Session、请求参数或数据库），渲染模板后返回CSS：

app.get('/styles.css', (req, res) => {
  // 获取用户主题（示例：从Session取，默认浅色模式）
  const userTheme = req.session.theme || 'light';
  
  // 定义不同主题的颜色配置
  const themeConfig = {
    light: {
      bgColor: '#ffffff',
      textColor: '#333333',
      accentColor: '#007bff'
    },
    dark: {
      bgColor: '#1a1a1a',
      textColor: '#ffffff',
      accentColor: '#4dabf7'
    }
  };
  
  // 设置响应头为CSS类型
  res.setHeader('Content-Type', 'text/css');
  // 渲染EJS模板并返回
  res.render('styles', themeConfig[userTheme]);
});

4. 在HTML中引用动态CSS

直接像普通CSS一样引用路由地址：

<link rel="stylesheet" href="/styles.css">

方案二：直接用JS生成CSS #

如果不想依赖EJS模板，也可以直接在Node.js中拼接CSS字符串，动态插入变量：

app.get('/styles.css', (req, res) => {
  const userTheme = req.session.theme || 'light';
  const colors = userTheme === 'dark' 
    ? { bg: '#1a1a1a', text: '#fff', accent: '#4dabf7' }
    : { bg: '#ffffff', text: '#333', accent: '#007bff' };
  
  // 拼接CSS字符串
  const dynamicCSS = `
    body {
      background-color: ${colors.bg};
      color: ${colors.text};
    }
    .header {
      background-color: ${colors.accent};
      color: white;
    }
  `;
  
  res.setHeader('Content-Type', 'text/css');
  res.send(dynamicCSS);
});

两种方案对比 #

• EJS模板方案：CSS结构更直观，和编写普通CSS的体验一致，适合样式复杂、需要大量动态调整的场景。
• JS拼接方案：无需依赖视图引擎，代码更紧凑，适合样式简单、动态变量少的场景。

内容的提问来源于stack exchange，提问作者Bez