- Hakyll 184.108.40.206
- hjsmin 0.2.0.1
- Sass 3.4.18
This seems to be an often asked question, so I thought I’d try and share the approach that I’ve arrived at after having explored a couple of solutions to the problem. If you want to see the full code in action, check out the repo for the codetalk.io site (linking to v1.0.0 is intended, in case the code changes later on).
For some reason
hjsmin giving us
NOTE: From personal experience an earlier version of
hjsmin(0.1.5.3) would throw a parse error on some files (like jQuery). This has later been fixed in 0.2.0.1, but unfortunately Stackage is using 0.1.5.3 in the current LTS 5.15.
hjsmin 0.2.0.1 working with
stack, you can add the following to the
stack.yaml file in the project.
hjsmin == 0.2.* as a dependency in the projects cabal file.
Now we are ready to construct the compiler itself.
The code is fairly straightforward. We use the
Text.Jasmine provided function
minify which has the signature
Later on inside the main
Hakyll function, we use it simply as we would the other compilers.
Compiling and minifying SCSS (Sass)
For those who aren’t aware, there are other ways to write CSS than CSS. Sass and SCSS adds a lot of niceties to CSS, such as nesting, variables and mixins, and compiles to normal CSS. You can read more about that on their website.
This time we rely on external dependencies, namely the
sass tool, which can be installed with
gem install sass.
NOTE: There is a library called
hsass, which provides a Haskell interface, but I’ve been running into problems with linking to the underlying C API. As such, I’ve opted for the external dependency for now.
-- | Create a SCSS compiler that transpiles the SCSS to CSS and -- minifies it (relying on the external 'sass' tool) compressScssCompiler :: Compiler (Item String) compressScssCompiler = do fmap (fmap compressCss) $ getResourceString >>= withItemBody (unixFilter "sass" [ "-s" , "--scss" , "--compass" , "--style", "compressed" , "--load-path", "scss" ])
This time we have no library dependencies, and use the
Hakyll provided function
unixFilter to call the
sass tool. An important thing is the arguments that we pass, which I’ll explain briefly:
sassto take its input from
sassto use the SCSS format
sassto make compass imports available
sassto compress the output
sassto look for modules in the
scssdirectory (if we import stuff)
Hakyll function as such:
-- | Define the rules for the site/hakyll compiler main :: IO () main = hakyll $ do -- | Compile the SCSS, from 'scss/app.scss', to CSS and serve it as 'app.css' match "scss/app.scss" $ do route $ constRoute "app.css" compile compressScssCompiler -- The rest of your rules...
Hakyll project, without much hassle :).