小编典典
该组件LESSPHP v0.3.8 + 不确定较早的版本,但是如果不立即使用它,您将了解其工作原理。
如果您使用less.js来编译客户端,请确保更改rel="stylesheet/less"为rel="stylesheet"
1)Grab
Lessphp我将这些文件放在/www/compilers/lessphp/此演示的上下文中
2)创建一个PHP脚本,我们可以将其丢弃。这将处理缓存,编译为CSS并返回CSS作为响应。我已经把这个文件的/www/compilers/,并把它称为lessphp.php
这段代码大部分都在Lessphp网站上,除了其中有错误之外,我在最后添加了响应。
require "lessphp/lessc.inc.php";
$file = $_GET["file"];
function autoCompileLess($inputFile, $outputFile) {
// load the cache
$cacheFile = $inputFile.".cache";
if (file_exists($cacheFile)) {
$cache = unserialize(file_get_contents($cacheFile));
} else {
$cache = $inputFile;
}
$less = new lessc;
$less->setFormatter("compressed");
$newCache = $less->cachedCompile($cache);
if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
file_put_contents($cacheFile, serialize($newCache));
file_put_contents($outputFile, $newCache['compiled']);
}
}
autoCompileLess('../' . $file, '../' . $file . '.css');
header('Content-type: text/css');
readfile('../' . $file . '.css');
?>
这会将LESS文件(例如,styles/main.less)编译为缓存文件和CSS文件(例如,styles/main.less.css)。
3)添加一条mod_rewrite规则,以便将用户请求的所有LESS文件重定向到我们的编译器,并为其指定路径。这被放置在根.htaccess文件中。
RewriteEngine On
RewriteBase /
RewriteRule ^([^.]*\.less)$ compilers/lessphp.php?file=$1 [R,QSA,L]
如果您使用的是WordPress,则需要遵循此规则-即使WordPress位于子目录中,它似乎也会覆盖这些规则,并且对于(在目录方面)WordPress
.htaccess规则下的引用文件,不会进行LESS编译。
4)您的LESS代码应相对于编译器位置进行相对引用。另外,如果有空属性,例如,Lessphp编译器将失败。background-color: ;
如果一切正常,则应进行以下操作:
直接浏览您的LESS文件 http://domain.com/styles/main.less
自动重定向到 http://domain.com/compilers/lessphp?file=styles/main.less
呈现最小的CSS
main.less.css而main.less.cache现在应该在同一个目录中存在作为你的LESS文件
除非您更新LESS文件,否则上次修改日期不应更改
2020-05-29