我使用 LESS 在我的应用程序中实现主题,并使用 nodejs less 模块将更少的文件编译为 CSS,但它在一种特定情况下不起作用。
我也在我的应用程序中使用 Bootstrap 并使用 Bootstrap less 源代码我只编译我在我的应用程序中想要的 css。
我还可以在我的各种主题中覆盖 Bootstrap 变量和 mixin。 因此,在编译 Bootstrap 时,我还需要考虑特定的主题变量和 mixin。
因此,区分 Bootstrap 变量/mixins 和 CSS 规则,我创建了 2 个不同的文件,
应用程序的目录结构
|--sample_application
|--resources
| |--libraries
| |--bootstrap
| |--css
| | |--application.less
| |--less
| | |--application_variables.less
|--themes
|--red
| |--mixins
| | |--mixins.less
| |--variables
| | |--variables.less
| |--red.less
|--blue
| |--mixins
| | |--mixins.less
| |--variables
| | |--variables.less
| |--blue.less
|--themes.less
说明哪个文件包含什么?
1. /sample_application/themes/<-theme_name->/mixins/mixins.less
此文件包含所有特定于应用程序的 mixin 和覆盖的引导程序 mixins。
.my-hover-mixin(@color) {
&:hover {
border: 2px solid @color;
}
}
/*Other theme specific mixins*/
2. /sample_application/themes/<-theme_name->/variables/variables.less
此文件包含所有特定于应用程序的变量和覆盖的引导程序变量。
@text-color:#333333;
@border-color:#999999;
@body-bg-color:red;
/*Other theme specific variables*/
3. /sample_application/themes/<-theme_name->/<-theme_name->.less
此文件包含该特定主题的 mixin 和变量的文件导入。
<strong i="10">@import</strong> "./variables/variables.less";
<strong i="11">@import</strong> "./mixins/mixins.less";
4. /sample_application/themes/theme.less
此文件包含两个文件导入。 第一个用于 Bootstrap 变量,即 application_variables.less,第二个用于特定主题的基本文件导入,例如。 无红/无蓝
<strong i="17">@import</strong> "application_variables.less";
<strong i="18">@import</strong> "red/red.less";
5. /sample_application/resources/libraries/bootstrap/css/application.less
该文件包含一个文件导入,即 /themes/themes.less 和所有必需的 Bootstrap CSS 规则。
<strong i="24">@import</strong> "theme.less";
/*Bootstrap CSS rules*/
6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
该文件包含所有必需的 Bootstrap 变量和 mixin。
/*Bootstrap variables and mixins*/
现在我有一个节点脚本文件,它减少了引导程序的编译,即compile-bootstrap.js
var fs = require("fs");
var less = require('less');
(function() {
var bsLessContent = fs.readFileSync("sample_application/resources/libraries/bootstrap/css/application.less");
less.render(bsLessContent.toString(), {
paths : [ "sample_application/themes/", "sample_application/resources/libraries/bootstrap/less/"],
compress : true
}, function(e, output) {
fs.writeFileSync("sample_application/resources/libraries/bootstrap/css/application.css", output);
});
})();
但是当我运行这个脚本时,我收到以下错误
{ [Error: 'application_variables.less' wasn't found]
type: 'File',
message: '\'application_variables.less\' wasn\'t found',
filename: 'sample_application\\themes\\theme.less',
index: 18,
line: 2,
callLine: NaN,
callExtract: undefined,
column: 0,
extract:
[ '<strong i="6">@import</strong> "application_variables.less";',
'<strong i="7">@import</strong> "red/red.less";' ] }
然后我也尝试使用相对路径,但仍然给出相同的错误
{ [Error: './../resources/libraries/bootstrap/less/application_variables.less' wasn't found]
type: 'File',
message: '\'./../resources/libraries/bootstrap/less/application_variables.less\' wasn\'t found',
filename: 'sample_application\\themes\\theme.less',
index: 18,
line: 2,
callLine: NaN,
callExtract: undefined,
column: 0,
extract:
[ '<strong i="11">@import</strong> "./../resources/libraries/bootstrap/less/application_variables.less";',
'<strong i="12">@import</strong> "red/red.less";' ] }
请注意,由于源是作为字符串提供给编译器的,因此您需要显式设置原始文件路径,以便编译器可以将其用作导入的基本路径,否则它就无法知道所有这些路径是什么指定是相对于(很可能它只会使用cwd
但实际上它在导入时几乎是“随机的”,并且不再需要指向您的项目根目录......)。 例如:
var fs = require('fs'),
path = require('path'),
less = require('less');
(function() {
var src = "foo/bar/baz.less";
less.render(fs.readFileSync(src).toString(), {
filename: path.resolve(src), // <- here we go
}, function(e, output) {
console.log(output.css);
});
})();
paths
选项也是如此,如果我没有弄错的话,它们应该是绝对的或相对于filename
。 一般来说,了解lessc
本身如何处理这些事情是个好主意。
感谢七相最大。 该解决方案运行良好,因此解决了问题。
最有用的评论
请注意,由于源是作为字符串提供给编译器的,因此您需要显式设置原始文件路径,以便编译器可以将其用作导入的基本路径,否则它就无法知道所有这些路径是什么指定是相对于(很可能它只会使用
cwd
但实际上它在导入时几乎是“随机的”,并且不再需要指向您的项目根目录......)。 例如:paths
选项也是如此,如果我没有弄错的话,它们应该是绝对的或相对于filename
。 一般来说,了解lessc
本身如何处理这些事情是个好主意。