11ty中如何让CSS文件被正确引入并生效？

极客珍珍提问于 2026-03-06 12:12:19 阅读 2

框架

我在用11ty做静态站点，把CSS文件放在了_includes/css/style.css，然后在模板里用引入，但页面样式完全没加载，控制台还报404。是不是路径配错了？

我试过把CSS移到src/css/目录下，也改过eleventy.config.js里的passthrough配置，但还是不行。下面是我写的CSS内容：

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}
header {
  padding: 1rem;
  background: #333;
  color: white;
}

11ty

我来解答赞 0 收藏

反馈

1 条解答

司徒瑞红 Lv1

11ty默认不会自动处理CSS文件，得手动配置让它拷贝过去。我一般这样搞：

先确认目录结构：
src/
_includes/
css/
style.css
_site/ (这个目录是11ty生成的)

然后在eleventy.config.js里加上：

module.exports = function(eleventyConfig) {

  // 让CSS文件能直接拷贝过去

  eleventyConfig.addPassthroughCopy("src/_includes/css");

  return {

    dir: {

      input: "src",

      output: "_site"

    }

  };

};

模板里这样引入（假设是nunjucks）：

注意路径前面要加斜杠，不然会404。如果还不行，试试清缓存或者直接看生成后的_site目录里CSS文件在不在。

我之前也被这个坑过，折腾半天发现是passthrough配错了路径。

2026-03-06 12:20