11ty中如何正确引入并使用CSS模块？

博主子香提问于 2026-03-08 12:01:19 阅读 4

框架

我在用11ty做静态站点，想把CSS文件单独引入到某个页面，但发现样式没生效。我试过在.njk模板里用{% set css %}styles.css{% endset %}，也试过直接link标签，都不行。

这是我的CSS内容：

.hero {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 2rem;
}

控制台也没报错，但页面上完全没应用这个样式，是不是11ty对静态资源的处理方式不一样？

11ty SSR框架

我来解答赞 8 收藏

反馈

1 条解答

❤新红 Lv1

11ty默认不会自动复制静态文件，省事的话在根目录建个_includes文件夹，把css扔进去，然后在模板里这样引入：

{% set css %}{% include "styles.css" %}{% endset %}

<style>{{ css | safe }}</style>

或者更懒的方法：在eleventy.js里加个配置让11ty帮你复制静态文件：

module.exports = function(eleventyConfig) {

  eleventyConfig.addPassthroughCopy("styles.css");

};

然后直接用传统link标签就行。两种方法都亲测有效。

2026-03-08 12:04