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

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

框架

我在用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框架

我来解答赞 17 收藏

反馈

2 条解答

A. 云超 Lv1

11ty不会自动复制静态资源到输出目录，这就是样式不生效的原因。

解决办法：

1. 把CSS文件放到 src 目录下，比如 src/styles/styles.css

2. 在项目根目录的 .eleventy.js 里添加 passthrough copy 配置：

module.exports = function(eleventyConfig) {

  eleventyConfig.addPassthroughCopy("src/styles");

  

  return {

    dir: {

      input: "src",

      output: "_site"

    }

  };

};

3. 在你的 .njk 模板里用绝对路径引用：

注意这里用的是 /styles/styles.css，不是相对路径。11ty生成的是静态站点，资源路径要相对于最终输出的 _site 目录。

还有一个容易踩的坑：如果你的CSS文件放在 _includes 目录下，那它会被当作模板处理而不是静态资源复制，这种情况下也需要配置 passthrough。

你检查一下CSS文件是否成功复制到 _site/styles/ 目录下，如果没复制过去就是配置问题。

2026-03-12 19:04

❤新红 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