Stable: 2.0.1
Beta: 3.0.0-beta.1
Canary: 3.0.0-alpha.18

Toggle Menu

Compare ×4000 file build

Eleventy 1.93s

Gatsby 29.05s

添加 CSS、JavaScript、字体

当你决定要为 Elevent 项目添加资源文件时，我们提供了多种方式供你选择。对于大多数项目来说，明智的做法是根据项目的复杂程度和长期维护目标来选择合适的方法。先从简单的方式开始，当项目需要时再增加复杂度！

以下几种可选方式按照从简单到复杂排列：

Step 1 复制 CSSWeb FontJavaScript 文件

这是最简单的方式，非常适合新手和/或小型项目。此方式的优点是 不需要打包工具和任何外部依赖。

复制 HTMLCSS 中引用的每个 CSSJavaScriptWeb Font 文件。

在项目的根目录下创建一个名为 bundle.cssbundle.js 的文件，然后为该文件添加 CSSJavaScript 代码。

使用 passthrough file copy to copy the file to the build output folder (you could use a glob here, too):

Filename.eleventy.js

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("bundle.css");
};

Filename.eleventy.js

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("font.woff2");
};

Filename.eleventy.js

module.exports = function(eleventyConfig) {
	eleventyConfig.addPassthroughCopy("bundle.js");
};

Reference the Web Font file in your CSS using:

@font-face {
	font-family: My Font Name;
	src: url('/font.woff2') format('woff2');
	font-display: swap;
}

Reference the CSS file in your HTML using:

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

Reference the JavaScript file in your HTML using
```
<script src="/bundle.js"></script>
```

Expand for an example using Concatention, pulling in from CSSJavaScript from multiple sources.

You can use the Nunjucks and Liquid include tag to do simple concatenation.

Next, you can output this code directly to your page:

Filenamepage.njk

<style>
{% include "header.css" %}
{% include "footer.css" %}
{% include "./node_modules/my-ficticious-package-name/package.css" %}
</style>

Filenamepage.njk

<script>
{% include "header.js" %}
{% include "footer.js" %}
{% include "./node_modules/my-ficticious-package-name/package.js" %}
</script>

Expand to see more Quick Tips, showing how to minify these bundles.

Step 2 Use an Eleventy Template

You can use an Eleventy Template to generate your bundle file and reference that from your template with <link rel="stylesheet" href="/bundle.css"><script src="/bundle.js"></script>:

Filenamecss-bundle.njk

---
permalink: bundle.css
---
{% include "header.css" %}
{% include "footer.css" %}
{% include "./node_modules/my-ficticious-package-name/package.css" %}

Filenamejs-bundle.njk

---
permalink: bundle.js
---
{% include "header.js" %}
{% include "footer.js" %}
{% include "./node_modules/my-ficticious-package-name/package.js" %}

Expand to see more Quick Tips, showing how to minify this bundle file.

#005—Super Simple CSS Concatenation

Expand to see Community Resources using this approach.

In the article below, Max showcases how to use an styles.11ty.js template file to generate a one-off Sass-compiled stylesheet:

Screenshot of https://mxb.dev/blog/eleventy-asset-pipeline/

Asset Pipelines in Eleventy (2021)

Step 3 Eleventy Custom Templates

You can add js and css (or even scss for Sass) as custom template types in Eleventy. This means that any js and css files added to your project are processed by Eleventy.

This also (optionally) allows you to post-process the CSS (using Sass, PostCSS, or LightningCSS) or client-JavaScript (using esbuild, rollup, WebPack, etc) and write the processed content to your output folder. This also allows you to use features in your bundle code that aren’t available in web browsers, like nesting CSS, TypeScript, or JSX.

Side note: this is strictly for code that runs in a web browser. There is a different approach if you want to use TypeScript or JSX in your Node.js JavaScript files that run as part of your build.

Here are a few great guides to get you started:

Using Eleventy Custom Templates to Add Sass Support to Eleventy

Screenshot of https://pepelsbey.dev/articles/eleventy-css-js/

CSS and JavaScript as First-Class Citizens in Eleventy (esbuild, PostCSS) (2022)

Screenshot of https://11ty.rocks/posts/process-css-with-lightningcss/

Process CSS or Sass with LightningCSS (LightningCSS) (2023)

Step 4 Component-driven Bundles

Eleventy also provides an optional @11ty/eleventy-plugin-bundle plugin that allows you to populate bundles with code from content pages. This allows you to make the CSS and JavaScript content-driven. The bundle plugin can be used in Nunjucks, Liquid, Handlebars, 11ty.js, and WebC templates and is provided for free with the eleventy-base-blog Starter Project.

Furthermore, the bundle plugin is used by WebC to create minimal bundles that are comprised only of CSS and JavaScript from components used on each WebC page.

Using WebC in this way provides the best and least-effort investment in the long-term maintenance of a page. When components on the page change, the JavaScript and CSS bundles are automatically streamlined and will not contain extra code from previous designs.

Get started with WebC!