Lego2012/Eleventy CSS Minification.md

## Eleventy CSS Minification.md

      
    Raw
  

              Eleventy CSS Minification.md
            
          
    Once installed, we'll need to add the cssmin filter to our Eleventy Config file. At the root of your project, create a file called .eleventy.js and add the following:
const CleanCSS = require("clean-css");

module.exports = function(eleventyConfig) {
  eleventyConfig.addFilter("cssmin", function(code) {
    return new CleanCSS({}).minify(code).styles;
  });
};

In your navbar.njk file inside the _includes folder, add the following inside the <head/>:
<head>
<!-- capture the CSS content as a Nunjucks variable -->
    {% set css %}
    {% include "css/navbar.css" %}
    {% endset %}
    <!-- feed it through our cssmin filter to minify -->
    <style>
      {{css | cssmin | safe}}
    </style>
</head>
. . .