LESS-Middleware:Node.js 和 LESS 的完美搭配
2020-12-13 05:27
标签:des style class blog c code LESS 是一个编写 CSS 的很好的方式
,让你可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码。 在这个例子中,我把源目录配置为我的应用程序的根目录下的 "/less" 目录,并让 CSS 输出到 "/public/css 目录。此外,你还需要指定
"prefix" 属性,以匹配跟在 "/public" 后面的目录,即 "/css" 目录。 你还可以指定其它参数,上面指定了 force 参数,让每次请求的时候重新编译 LESS
文件,再结合自动刷新功能,这样在开发的时候修改样式代码都可以有即时的效果。 最后在页面上引用 CSS 文件就和正常的一样了: 这边文章发布的时候,less-middleware 已更新到到 1.0.3 版本,上面的配置是针对 0.1.x 的,下面给大家介绍如果从
0.1.x 迁移到 1.0.x。 首先,也是重要的变化——源目录参数的变化,之前是放在 options 参数里的,如下: 因为源目录是必备参数,所以升级之后作为中间件的第一个参数,如下: 第二个变化是中间件参数和 LESS 参数分离,这样参数结构更清晰明了,如下: options 参数是提供给中间件使用的,而后面两个参数对象不会影响中间件,是传递给 LESS 解析和编译器的。 在这个调整之后,对应参数定义方式也要相应的调整,下面是一些对应的修改: 第三个变化是新增加了参数,同时移除了 prefix 和 treeFunctions
参数,让你可以更灵活的进行配置,如下: 有了这几个参数,我们之前使用 prefix 实现的功能可以用下面的方式达到同样的效果: 更详细的信息,可以参考 less-middleware 官方文档。 本文链接:LESS-Middleware:Node.js
和 LESS 的完美搭配 编译来源:梦想天空 ◆ 关注前端开发技术
◆ 分享网页设计资源 本文出处【http://www.cnblogs.com/lhb25/】 LESS-Middleware:Node.js 和 LESS 的完美搭配,搜素材,soscw.com LESS-Middleware:Node.js 和 LESS 的完美搭配 标签:des style class blog c code 原文地址:http://www.cnblogs.com/lhb25/p/less-middleware-using-less-with-node-js.html
var
lessMiddleware = require(
"less-middleware"
);
app.use(lessMiddleware({
src: __dirname +
"/less"
,
dest: __dirname +
"/public/css"
,
prefix:
"/css"
,
force:
true
}));
app.use(express.
static
(__dirname +
"/public"
));
"stylesheet"
, type=
"text/css"
, href=
"css/styles.css"
>
升级和迁移
lessMiddleware({
src: path.join(__dirname,
‘/public‘
)
})
lessMiddleware(path.join(__dirname,
‘/public‘
))
lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])
compress
: 从 options
移除,
需要在 compilerOptions 中定义;
dumpLineNumbers
: 从 options
移除,需要再
parserOptions 中定义;
optimization
: 从 options
移除,
需要再
parserOptions 中定义;
paths
: 从 options
移除,
需要再
parserOptions 中定义;
preprocessor
: 已经被移动到 preprocessor.less
中进行定义;
relativeUrls
: 从 options
移除,
需要再
parserOptions 中定义;
sourceMap
: 从 options
移除,
需要在 compilerOptions 中定义;
yuicompress
: 从 options
移除,
需要在 compilerOptions 中定义;
postprocess.css
: 在被保存之前,修改 CSS 编译输出;preprocess.less
: 在 LESS 被解析和编译前进行修改;preprocess.path
: 在被文件系统加载前,修改 LESS 路径;
preprocess: {
path:
function
(pathname, req) {
return
pathname.replace(/^\/less\
//, ‘/css‘);
}
}
文章标题:LESS-Middleware:Node.js 和 LESS 的完美搭配
文章链接:http://soscw.com/essay/31046.html