Code racer: LESS to Generate CSS

Question

Hi everyone! I've been progressing through the Code racer program and have noticed a few problems that pop up. I was able to have it work up till this point. I downloaded the example code from the project and compared and updated it, but it still didn't work. It's using Express, Coffee, and LESS-generated CSS.

The issue is when I navigate to a particular website, the Bootstrap CSS doesn't seem to kick in. The background doesn't turn red, and the typography isn't changed.

Here is the Description of the Video/Project:

LESS is a dynamic stylesheet language that generates CSS. LESS adds features like variables, mixins, and nested definitions which make writing and maintaining a large stylesheet easier. Because LESS requires a compilation step to generate CSS the browser can understand, we must configure our server to understand LESS.

In this video we add a library that can compile LESS and serve it as a CSS file. We also add Twitter's Bootstrap framework. Bootstrap is written in LESS and provides a base style that can be modified and extended through LESS variables and mixins.

The CSS and the Background appear at the bottom of the screen as expected when I go to http://localhost:3000/application.css, but the http://localhost:3000/ is not formatted with the background or Bootstrap font typography.

I believe I'm trying to have LESS components generated into CSS, and then passed along to the web-pages. Here is the contents of my main folder:

less
- application.less
- bootstrap.less
node_modules
public
views
- index.eco
- layout.eco
package.json
server.coffee

Here is the code for the files above:

application.less

@import 'bootstrap.less';

body {
    background: red;
}

index.eco

<h1><%= @title %></h1>

layout.eco

<!DOCTYPE html>
<html lang="end">
<head>
    <title>Our Page</title>
    <link rel="stylesheet" href="/application.css">
</head>
<body>
    <%- @body %>
</body>

</html>

package.json

    {
          "name": "coderacer",
          "version": "0.0.0",
          "description": "An Awesome Game",
          "main": "index.js",
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
          },
          "author": "",
          "license": "BSD-2-Clause",
          "dependencies":{
            "coffee-script":"*",
            "express":"*",
            "eco":"*",
            "consolidate":"*",
            "connect-lesscss":"*"
          }
    }

server.coffee

require 'coffee-script'
express = require 'express'
cons = require 'consolidate'
less = require 'connect-lesscss'

app = express()
app.engine 'eco', cons.eco

app.configure ->
    app.use express.static("#{__dirname}/public")
    app.use '/application.css', less("#{__dirname}/less/application.less")

app.get '/', (req, res) ->
    res.render 'index.eco',
    title: 'Our Special Titles!!'

app.get '/foo', (req,res) ->
    res.render 'index.eco',
    title: 'Foo!!!'

app.listen(3000)
console.log "Server is listening"

Errors don't pop up, but when navigating to the site- http://localhost:3000/ - the style hasn't changed as it did in the video. I tried to keep this minimal, but let me know if there's something I can add to help! Forgive me for any incorrect syntax/terms! - I'm new to this and still learning :) Thank you again for any help!

Answer 1 · 2013-10-22T16:31:31Z

October 22, 2013 4:31pm

Hi Ray!

I am not really clear on what your questions is. If you could clarify what you are expecting and what is not happening that would help a bunch. Also, if you can, paste in the code you are using (HTML/CSS/Javascript/etc...) that will help us tremendously in trying to help you! :)

Answer 2 · 2013-10-22T18:09:28Z

October 22, 2013 6:09pm

I found if I add:

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

to the index.eco file, this fixed the problem. But I'm not sure if this is good practice or more of a band-aid.

Answer 3 · 2013-10-22T19:28:34Z

October 22, 2013 7:28pm

Awesome! Thanks for all the info!

I have not done the code racer program yet so I honestly can't comment on the rest of the files, but you will have to reference the stylesheet in each page created either programmatically or manually.

Welcome to the Treehouse Community

Looking to learn something new?

Ray Kepler

Ray Kepler

Code racer: LESS to Generate CSS

Here is the Description of the Video/Project:

Here is the code for the files above:

3 Answers

Shawn Denham

Shawn Denham

Ray Kepler

Ray Kepler

Ray Kepler

Ray Kepler

Shawn Denham

Shawn Denham