Problem with link rel="stylesheet / less" ...

5

I'll start studying LESS, but the problem is that I can not move to the first step.

If I put <link rel="stylesheeet/less"...> does not work. Only work if I put <link rel="stylesheeet"...> without /less .

I've been reading and seen that it could work if I rolled on top of WAMP. It still did not work. Has anyone had this problem and can you give me a light?

----- HTML -----

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet/less" type="text/css" href="bootstrap.less">
        <script src="js/bootstrap.js"></script>
    </head>
    <body>
    </body>
</html>

----- CSS -----

body{
  background: url("imagens/bg.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
    
asked by anonymous 10.12.2014 / 15:00

5 answers

2

Solved the problem!

For this:

Use a compiler (I do not know if that's the name) for less. Direct it to the CSS file that this compiler will generate.

Here it worked!

I'm running on top of WAMP, did not test out of it.

It looks like this:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<script type="text/javascript" src="js/less.js"></script>

obs: My less.js, is the bootstrap.js renamed.

I hope I have helped someone. Thanks to the users who commented and tried to help me somehow. Big hug. Good studies.

    
12.12.2014 / 17:24
5

It's important to remember that browsers do not understand LESS natively! So just adding the style in LESS format to your page would not even work. To get around this you basically have two solutions:

Solution 1: Less.js

Download LESS and import the less.js file into your project next to your file .less :

<link rel="stylesheet/less" type="text/css" href="bootstrap.less">
<script src="less.js" type="text/javascript"></script>

This solution is not recommended for the production environment, since every time a user accesses your page, JavaScript would have to interpret and compile your .less file at runtime.

Solution 2: Compile LESS in CSS

Following the project documentation , with Node.js installed, you could use the following command line to compile your file:

$ lessc caminho/para/meu/arquivo/estilo.less

You can also use a graphical interface if you are not familiar with the terminal.

    
12.12.2014 / 21:09
4

You need to download and include the LESS interpreter in JavaScript for this to work:

<script src="less.js" type="text/javascript"></script>

Reference: link

    
10.12.2014 / 15:10
0

Try using grunt or gulp both can guarantee the compilation of your less and several other important things like ensuring that your code is spelled correctly. It's something more powerful, besides compiling your less, you can concatenate or minify them.

    
12.12.2014 / 20:12
0

For this you need to download less.js and include it in a tag in the element of your page:

<script src="less.js" type="text/javascript"></script>
  • Be sure to include your .less before from the above script.
  • When you link more than one .less each is compiled independently, that is, any variables, mixins or namespaces that you define in one are not accessible in another.
12.12.2014 / 20:50