Why Is My Less.js Not Working in Chrome?

Less.js Not Responding in Chrome

Less.js functionality in Firefox while remaining unresponsive in Chrome has raised concerns. To determine the cause, let's examine the provided code:

<link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

The code seems to implement Less.js with valid CSS preprocessor syntax. However, the culprit lies in the environment and settings used. According to the provided documentation:

Less.js Browser Script Limitations in Chrome

"Less.js browser script currently won't work if you're using Chrome and the path to your page starts with “file:///…”. This is due to a known Chrome issue."

This implies that Less.js may not work in Chrome when using local files rather than a web server.

Solution

To resolve the issue, try the following:

• Serve files using a web server: Upload your files to a web server and access them using a URL (e.g., http://example.com/style.less).
• Use a localhost setup: Run a local development server (e.g., PHP's built-in server, Python's SimpleHTTPServer) and access your files through an address like http://localhost:8000/style.less.
• Consider alternatives: Use a Less.js processing tool such as grunt or gulp to compile Less files during development, ensuring their compatibility with Chrome.

The above is the detailed content of Why Is My Less.js Not Working in Chrome?. For more information, please follow other related articles on the PHP Chinese website!