我是SailsJS的新手，我一直在努力了解如何让它与LESS一起工作。我的理解是它可以开箱即用。
$ sails --version
0.12.3
我正在开发 Mac OSX El Capitan ，这就是我所做的。
我创建了一个新项目
sails new myProject
然后愿意将 bower 集成到我的设置中，我有
npm i sails-generate-bower
和
sails generate bower
使用bower安装 Bootstrap
bower install bootstrap --save
我的pipeline.js
var cssFilesToInject = [
'vendor/**/*.css',
'styles/**/*.css'
];
当我sails lift时，我的layout.ejs包含：
<!--STYLES-->
<link rel="stylesheet" href="/styles/importer.css">
<!--STYLES END-->
没有注入我的bootstrap.css ??
将pipeline.js更改为
var cssFilesToInject = [
'styles/importer.less'
];
在我的importer.less添加了这些内容：
@import '../vendor/fontawesome/font-awesome.less';
@import '../vendor/bootstrap/bootstrap.less';
$ sails lift
info: Starting app...
info:
info: .-..-.
info:
info: Sails <| .-..-.
info: v0.12.3 |\
info: /|.\
info: / || \
info: ,' |' \
info: .-'.-==|/_--'
info: `--'-------'
info: __---___--___---___--___---___--___
info: ____---___--___---___--___---___--___-__
info:
info: Server lifted in `/Users/joel/Code/sails-website`
info: To see your app, visit http://localhost:1337
info: To shut down Sails, press <CTRL> + C at any time.
debug: -------------------------------------------------------
debug: :: Wed May 25 2016 17:19:32 GMT+0200 (CEST)
debug: Environment : development
debug: Port : 1337
debug: -------------------------------------------------------
error: ** Grunt :: An error occurred. **
error:
------------------------------------------------------------------------
Aborted due to warnings.
Running "less:dev" (less) task
>> FileError: 'responsive-utilities.less' wasn't found. Tried - assets/vendor/bootstrap/responsive-utilities.less,assets/styles/responsive-utilities.less,responsive-utilities.less in assets/vendor/bootstrap/bootstrap.less on line 56, column 1:
>> 55 @import "utilities.less";
>> 56 @import "responsive-utilities.less";
>> 57
Warning: Error compiling assets/styles/importer.less
------------------------------------------------------------------------
error: Looks like a Grunt error occurred--
error: Please fix it, then **restart Sails** to continue running tasks (e.g. watching for changes in assets)
error: Or if you're stuck, check out the troubleshooting tips below.
error: Troubleshooting tips:
error:
error: *-> Are "grunt" and related grunt task modules installed locally? Run `npm install` if you're not sure.
error:
error: *-> You might have a malformed LESS, SASS, CoffeeScript file, etc.
error:
error: *-> Or maybe you don't have permissions to access the `.tmp` directory?
error: e.g., `/Users/joel/Code/sails-website/.tmp` ?
error:
error: If you think this might be the case, try running:
error: sudo chown -R 501 /Users/joel/Code/sails-website/.tmp
GruntJS $ grunt
Running "bower:install" (bower) task
>> Cleaned target dir /Users/joel/Code/sails-website/assets/vendor
>> Installed bower packages
>> Copied packages to /Users/joel/Code/sails-website/assets/vendor
>> Cleaned bower dir /Users/joel/Code/sails-website/bower_components
Running "clean:dev" (clean) task
>> 0 paths cleaned.
Running "jst:dev" (jst) task
>> Destination not written because compiled files were empty.
Running "less:dev" (less) task
>> ParseError: Unrecognised input in assets/styles/importer.less on line 20, column 2:
>> 19 @import '../vendor/bootstrap/bootstrap.less';
>> 20 # @import '../../vendor/fontawesome/font-awesome.less';
>> 21 # @import '../../vendor/bootstrap/bootstrap.less';
Warning: Error compiling assets/styles/importer.less Use --force to continue.
Aborted due to warnings.
并且处于详细模式grunt --verbose：
...
Running "bower:install" (bower) task
Verifying property bower.install exists in config...OK
File: [no files]
Options: cleanTargetDir, cleanBowerDir, targetDir="./assets/vendor", layout="byType", install, verbose=false, copy, bowerOptions={}
>> Cleaned target dir /Users/joel/Code/sails-website/assets/vendor
bower cached https://github.com/twbs/bootstrap.git#3.3.6
bower validate 3.3.6 against https://github.com/twbs/bootstrap.git#~3.3.6
bower cached https://github.com/FortAwesome/Font-Awesome.git#4.6.3
bower validate 4.6.3 against https://github.com/FortAwesome/Font-Awesome.git#~4.6.3
bower cached https://github.com/jquery/jquery-dist.git#2.2.4
bower validate 2.2.4 against https://github.com/jquery/jquery-dist.git#1.9.1 - 2
bower install fontawesome#4.6.3
bower install bootstrap#3.3.6
bower install jquery#2.2.4
>> Installed bower packages
Reading /Users/joel/Code/sails-website/bower.json...OK
Parsing /Users/joel/Code/sails-website/bower.json...OK
Reading bower_components/bootstrap/less/bootstrap.less...OK
Writing assets/vendor/bootstrap/bootstrap.less...OK
grunt-bower copying bower_components/bootstrap/less/bootstrap.less -> assets/vendor/bootstrap/bootstrap.less
Reading bower_components/bootstrap/dist/js/bootstrap.js...OK
Writing assets/vendor/bootstrap/bootstrap.js...OK
grunt-bower copying bower_components/bootstrap/dist/js/bootstrap.js -> assets/vendor/bootstrap/bootstrap.js
Reading bower_components/fontawesome/less/font-awesome.less...OK
Writing assets/vendor/fontawesome/font-awesome.less...OK
grunt-bower copying bower_components/fontawesome/less/font-awesome.less -> assets/vendor/fontawesome/font-awesome.less
Reading bower_components/fontawesome/scss/font-awesome.scss...OK
Writing assets/vendor/fontawesome/font-awesome.scss...OK
grunt-bower copying bower_components/fontawesome/scss/font-awesome.scss -> assets/vendor/fontawesome/font-awesome.scss
Reading bower_components/jquery/dist/jquery.js...OK
Writing assets/vendor/jquery/jquery.js...OK
grunt-bower copying bower_components/jquery/dist/jquery.js -> assets/vendor/jquery/jquery.js
>> Copied packages to /Users/joel/Code/sails-website/assets/vendor
>> Cleaned bower dir /Users/joel/Code/sails-website/bower_components
Running "clean:dev" (clean) task
Verifying property clean.dev exists in config...OK
Files: [no src] -> dev
Options: force=false, no-write=false
>> 0 paths cleaned.
Running "jst:dev" (jst) task
Verifying property jst.dev exists in config...OK
Files: [no src] -> .tmp/public/jst.js
Options: namespace="JST", templateSettings={}, processContent=undefined, separator="\n\n"
>> Destination not written because compiled files were empty.
Running "less:dev" (less) task
Verifying property less.dev exists in config...OK
Files: assets/styles/importer.less -> .tmp/public/styles/importer.css
Options: banner=""
Reading assets/styles/importer.less...OK
>> ParseError: Unrecognised input in assets/styles/importer.less on line 20, column 2:
>> 19 @import '../vendor/bootstrap/bootstrap.less';
>> 20 # @import '../../vendor/fontawesome/font-awesome.less';
>> 21 # @import '../../vendor/bootstrap/bootstrap.less';
Warning: Error compiling assets/styles/importer.less Use --force to continue.
Aborted due to warnings.
当我单独尝试bower install时，我可以看到所有必需的文件都存在，所以看起来我的Grunt任务没有复制所有需要的文件
bower_components/bootstrap/less$ ls -al
total 576
drwxr-xr-x 46 joel staff 1.5K May 25 14:12 ./
drwxr-xr-x 16 joel staff 544B May 27 13:00 ../
-rw-r--r-- 1 joel staff 7.9K May 25 14:12 .csscomb.json
-rw-r--r-- 1 joel staff 456B May 25 14:12 .csslintrc
-rw-r--r-- 1 joel staff 1.5K May 25 14:12 alerts.less
-rw-r--r-- 1 joel staff 1.2K May 25 14:12 badges.less
-rw-r--r-- 1 joel staff 1.3K May 25 14:12 bootstrap.less
-rw-r--r-- 1 joel staff 594B May 25 14:12 breadcrumbs.less
-rw-r--r-- 1 joel staff 5.5K May 25 14:12 button-groups.less
-rw-r--r-- 1 joel staff 3.6K May 25 14:12 buttons.less
-rw-r--r-- 1 joel staff 5.5K May 25 14:12 carousel.less
-rw-r--r-- 1 joel staff 764B May 25 14:12 close.less
-rw-r--r-- 1 joel staff 1.4K May 25 14:12 code.less
-rw-r--r-- 1 joel staff 666B May 25 14:12 component-animations.less
-rw-r--r-- 1 joel staff 4.8K May 25 14:12 dropdowns.less
-rw-r--r-- 1 joel staff 15K May 25 14:12 forms.less
-rw-r--r-- 1 joel staff 19K May 25 14:12 glyphicons.less
-rw-r--r-- 1 joel staff 1.4K May 25 14:12 grid.less
-rw-r--r-- 1 joel staff 4.2K May 25 14:12 input-groups.less
-rw-r--r-- 1 joel staff 1.1K May 25 14:12 jumbotron.less
-rw-r--r-- 1 joel staff 1.1K May 25 14:12 labels.less
-rw-r--r-- 1 joel staff 3.1K May 25 14:12 list-group.less
-rw-r--r-- 1 joel staff 900B May 25 14:12 media.less
drwxr-xr-x 32 joel staff 1.1K May 25 14:12 mixins/
-rw-r--r-- 1 joel staff 1.1K May 25 14:12 mixins.less
-rw-r--r-- 1 joel staff 3.4K May 25 14:12 modals.less
-rw-r--r-- 1 joel staff 14K May 25 14:12 navbar.less
-rw-r--r-- 1 joel staff 4.8K May 25 14:12 navs.less
-rw-r--r-- 1 joel staff 7.4K May 25 14:12 normalize.less
-rw-r--r-- 1 joel staff 861B May 25 14:12 pager.less
-rw-r--r-- 1 joel staff 2.0K May 25 14:12 pagination.less
-rw-r--r-- 1 joel staff 6.1K May 25 14:12 panels.less
-rw-r--r-- 1 joel staff 3.4K May 25 14:12 popovers.less
-rw-r--r-- 1 joel staff 1.9K May 25 14:12 print.less
-rw-r--r-- 1 joel staff 1.9K May 25 14:12 progress-bars.less
-rw-r--r-- 1 joel staff 546B May 25 14:12 responsive-embed.less
-rw-r--r-- 1 joel staff 4.2K May 25 14:12 responsive-utilities.less
-rw-r--r-- 1 joel staff 2.9K May 25 14:12 scaffolding.less
-rw-r--r-- 1 joel staff 4.5K May 25 14:12 tables.less
-rw-r--r-- 1 joel staff 8.0K May 25 14:12 theme.less
-rw-r--r-- 1 joel staff 753B May 25 14:12 thumbnails.less
-rw-r--r-- 1 joel staff 2.9K May 25 14:12 tooltip.less
-rw-r--r-- 1 joel staff 5.8K May 25 14:12 type.less
-rw-r--r-- 1 joel staff 747B May 25 14:12 utilities.less
-rw-r--r-- 1 joel staff 27K May 25 14:12 variables.less
-rw-r--r-- 1 joel staff 527B May 25 14:12 wells.less
module.exports = function(grunt) {
// Load the include-all library in order to require all of our grunt
// configurations and task registrations dynamically.
var includeAll;
try {
includeAll = require('include-all');
} catch (e0) {
try {
includeAll = require('sails/node_modules/include-all');
}
catch(e1) {
console.error('Could not find `include-all` module.');
console.error('Skipping grunt tasks...');
console.error('To fix this, please run:');
console.error('npm install include-all --save`');
console.error();
grunt.registerTask('default', []);
return;
}
}
/**
* Loads Grunt configuration modules from the specified
* relative path. These modules should export a function
* that, when run, should either load/configure or register
* a Grunt task.
*/
function loadTasks(relPath) {
return includeAll({
dirname: require('path').resolve(__dirname, relPath),
filter: /(.+)\.js$/
}) || {};
}
/**
* Invokes the function from a Grunt configuration module with
* a single argument - the `grunt` object.
*/
function invokeConfigFn(tasks) {
for (var taskName in tasks) {
if (tasks.hasOwnProperty(taskName)) {
tasks[taskName](grunt);
}
}
}
// Load task functions
var taskConfigurations = loadTasks('./tasks/config'),
registerDefinitions = loadTasks('./tasks/register');
// (ensure that a default task exists)
if (!registerDefinitions.default) {
registerDefinitions.default = function (grunt) { grunt.registerTask('default', []); };
}
// Run task functions to configure Grunt.
invokeConfigFn(taskConfigurations);
invokeConfigFn(registerDefinitions);
};
tasks/config/bower.js任务module.exports = function(grunt) {
grunt.config.set('bower', {
install: {
options: {
targetDir: './assets/vendor',
layout: 'byType',
install: true,
verbose: true,
cleanTargetDir: true,
cleanBowerDir: true,
bowerOptions: {}
}
}
});
grunt.loadNpmTasks('grunt-bower-task');
};
这里必须要修理一下（？）
This points the problem indeed
我可以使用Bower exportsOverride
"exportsOverride": {
"bootstrap": {
"js": "dist/js/*.min.*",
"css": "dist/css/*.min.*",
"fonts": "dist/fonts/*.*"
}
}
答案 0 :(得分：0)
修改
在pipeline.js中，您必须包含生成的CSS文件
var cssFilesToInject = [
'styles/importer.css'
];
在importer.less导入boostrap.less导入responsive-utilities.less和其他.less文件。但是，根据您的帖子，bootstrap.less中没有。/assets/vendor/bootstrap的.less文件。
您是否使用bower install bootstrap --save安装了bootstrap？
编辑2：
这是我的任务/ config / bower.js
...
grunt.config.set('bower', {
dev: {
dest: '.tmp/public',
js_dest: '.tmp/public/js',
css_dest: '.tmp/public/styles',
fonts_dest: '.tmp/public/fonts',
images_dest: './tmp/public/images/',
options: {
expand: true,
keepExpandedHierarchy: false,
packageSpecific: {
'font-awesome': {
files: [
"fonts/*"
]
},
'bootstrap': {
files: [
"dist/js/bootstrap.min.js",
"dist/fonts/*"
]
},
'lodash' : {
files: [
'dist/lodash.min.js'
]
},
'moment' : {
files: [
'locale/fr.js',
'locale/en.js',
'moment.js',
'min/moment.min.js'
]
},
....
task / config / less.js生成.css
...
grunt.config.set('less', {
dev: {
files: [{
expand: true,
cwd: 'assets/styles/',
src: ['importer.less'],
dest: '.tmp/public/styles/',
ext: '.css'
}]
}
});
...
您不必导入.less文件。他们将合并到te .css
答案 1 :(得分：0)
pipeline.js var cssFilesToInject = [
'styles/importer.css'
];
importer.less @import '../vendor/bootstrap/less/bootstrap.less';
bower.json "exportsOverride": {
"bootstrap": {
"js": "dist/js/*.min.*",
"css": "dist/css/*.min.*",
"less": "less/" <===== This will copy all the necessary less files
}
},
tasks/config/bower.js 将布局更改为byComponent
module.exports = function(grunt) {
grunt.config.set('bower', {
install: {
options: {
targetDir: './assets/vendor',
layout: 'byComponent', <=== was `byType`
install: true,
verbose: false,
cleanTargetDir: true,
cleanBowerDir: true,
bowerOptions: {}
}
}
});
grunt.loadNpmTasks('grunt-bower-task');
};