Problem with <link rel="stylesheet/Less" ... >

Asked

Viewed 1,089 times

5

I’ll start studying LESS, but the problem is I can’t move on to the first step.

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

I have been reading and I saw that it could work if I rotate on top of the WAMP. Still it didn’t work. Someone has had this problem and can 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;
}
html css less

  • You are testing your page on a server or by opening the HTML file directly?

  • I tested only by the local server. WAMP. Direct by html, tb did not work.

5 answers

5

It is important to remember that browsers do not understand LESS natively! So just adding the style in LESS format to your page wouldn’t work anyway. To get around this you have basically two solutions:

Solution 1: Less.js

Download the LESS software and import the file less.js in your project together with 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 advised for the production environment, since every time a user accesses your page, Javascript would have to interpret and compile your file .less 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 not familiar with the terminal.

  • I am using Sublimetext3. I found in one of the tutos I saw, recommend installing Node.js and in sublime, some plugins that allow Sublime itself to do this compilation.

4

  • bfavaretto, thanks for the reply. I did what you said. I downloaded and made the link to Less.js. But it hasn’t worked yet. I gave one more test and it’s still the same. If you take the /Less, everything works. <link rel="stylesheet/Less" type="text/css" href="bootstrap.Less"> <script src="Less.js" type="text/javascript"></script>

  • In fact, I went to test and saw the same. If you have news, I update here.

  • I also read that in Chrome, it doesn’t work.Although I was surprised by this, I went to Ffox and IE. Same problem! I have no idea what it might be.

2


Solved the problem!

For that reason:

Use a compiler (I don’t know if that’s the name) for Less. Direct to the CSS file this compiler will generate.

Here worked!

I’m spinning on top of the WAMP, I didn’t test off it.

He became so:

<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 helped someone. I thank the users who commented and tried to help me somehow. Big hug. Good studies.

  • Yes, but you actually missed the problem. Compiling LESS for CSS is recommended in production. The other technique (processing the LESS into the customer) is good for development.

  • Is the way I did it wrong/not recommended? Because it was the way I thought to make it work.

  • It’s not wrong, it’s the way to use it in production. In this case, you don’t even need the JS of LESS, because the file is already compiled. It only gives a little more work during development, since you need to compile before each test. I said that you bypassed because it does not solve what you asked, which is to interpret the LESS dynamically in the client (browser).

  • My hope is that it still works on an online server, but I haven’t been able to run these tests yet. For now, to learn the language, I think you can break the branch.

  • it will work. When you compile LESS locally and link CSS in HTML, there is no more LESS in play. There is no reason why it should not work :)

0

Try to use the Grunt or Gulp both can ensure the compilation of your Ess and several other important things like ensuring that your code is written correctly. It is something simple more powerful, besides compiling your Less, you can concatenate or minify them.

  • I am compiling directly by Sublime. Some plugin (I don’t know exactly which one I installed), is compiling for me.

0

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

<script src="less.js" type="text/javascript"></script>
  • Make sure to include your . Less before of the above script.
  • When you link more than one. Less each of them is compiled independently, that is, any variable, mixins or namespaces you define in one are not accessible in another.

  • The order of the tags is fine. I had already attended to this too.

Browser other questions tagged html css less

You are not signed in. Login or sign up in order to post.