less怎么编译
❶ 如何使用lessc编译.less文件
使用lessc编译.less文件的方法
预备环境 iOS开发环境，Mac OS、XCode5.0以上版本；
下载HBuilder离线打包iOS版SDK（5+ SDK下载）。
SDK目录说明： HBuilder-Hello：离线打包演示应用；
Feature-iOS.xls：iOS平台各扩展Feature API对应的库文件列表；
❷ 如何用sublimeText3编写less并用Nodejs自动编译成css
1、安装Sublime 插件
（1）安装LESS插件：
因为Sublime不支持Less语法高亮，
所以，先安装这个插件，
方法1： ctrl+shift+p>install Package>输入less按Enter
方法2：直接下载后 解压文件 放到插件文件夹下（首选项-浏览插件 打开文件夹）
下载地址：https://github.com/danro/LESS-sublime
（2）安装LESS2CSS插件：
less2css的读音 其实就是less to css
这个插件的作用是
当保存less文件的时候自动生成同名的css文件；
当保存less文件的时候提示编译错误信息；
批量编译项目目录下的所有less文件为css文件。
安装：
方法1：ctrl+shift+p>install Package>输入less2css按Enter
方法2：直接下载：https://github.com/timdouglas/sublime-less2css
解压文件 放到插件文件夹下
但是我们还要让sublime支持less并自动编译，所以还需以下步骤：
2、安装Node.js
首先先配置一下环境，
less需要nodejs支持，
所以我们先要安装一下nodejs
到nodejs官网下载就可以了：https://nodejs.org/en/
3、安装less
运行-cmd：
输入命令行：
npm install less -g
-g 代表着全局安装less
之后在 Sublime 里面建less文件时，会有一个错误
LESS: Unable to interpret argument clean-css
这是因为还需要一个插件
less-plugin-clean-css插件的安装
命令行为：
npm install less-plugin-clean-css -g
接着重启一下sublime，就搞定啦！
❸ 如何使用lessc编译.less文件
使用lessc编译.less文件的方法
预备环境 iOS开发环境，Mac OS、XCode5.0以上版本；
下载HBuilder离线打包iOS版SDK（5+ SDK下载）。
SDK目录说明： HBuilder-Hello：离线打包演示应用；
Feature-iOS.xls：iOS平台各扩展Feature API对应的库文件列表；
❹ 怎样用node.js编译less文件
输入npm install -g less，完成全局安装less编译模块
输入lessc （需要编译的less文件名称及路径）>（编译生成的CSS文件名称及路径）：
❺ bootstrap中文网上的less怎么用grunt编译
始做点功能吧：Grunt实现Less实时编译,web服务器。
实现这些功能，
主要的就是安装Grunt插件、编写配置文件的工作。
安装很简单。
主要讲解这个配置文件吧。
Gruntfile.js文件：
mole.exports = function(grunt) {
// include connect-include
var ssInclude = require("connect-include");
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
files: [{
expand: true,
cwd: './static/less',
src: ['**/*.less'],
dest: 'static/css',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
scripts: {
files: ['./static/less/**/*.less'],
tasks: ['less'],
options: {
spawn: false,
},
},
},
connect: {
server: {
options: {
port: 8080,
// 在connect与watch同时运行的时候，keepalive不能为true
，这里注释了keepalive，因为他的默认值就是false。
// keepalive: true,
// livereload: true,
base: './static',
middleware: function(connect, options) {
// Same as in grunt-contrib-connect
var middlewares = [];
var directory = options.directory || options.base[options.base.length - 1];
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Here we insert connect-include, use the same pattern to add other middleware
middlewares.push(ssInclude(directory));
// Same as in grunt-contrib-connect
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
middlewares.push(connect.directory(directory));
return middlewares;
}
}
}
}
});
// Load the plugin that provides the "uglify" task.
// grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
// grunt.registerTask('default', ['uglify']);
grunt.registerTask('default', [ 'connect','watch']);
//使用watch，实时编译less成功
};
package.json文件：
{
"name": "Grunt-base",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-less": "^1.0.0",
"grunt-contrib-watch": "^0.6.1"
},
"dependencies": {
"connect-include": "^0.2.1"
}
}
插件安装完成，
写好项目配置文件，运行：
使用CMD命令行：grunt
浏览器访问http://127.0.0.1:8080/ 查看效果：
常见的构建工具：
Grunt、FIS（网络出品）等。
FIS也是一个不错的构建工具。
目前很多的Web前端构建工具都是Node.js写的。
我的项目结构：
注意事项：
如果你在使用中，grunt-contrib-connect、grunt-contrib-watch两个同时搭配使用，出现不能正常工作的问题，要注意这个connect的这个配置：keepalive: false。
如果没有配合grunt-contrib-watch的时候，keepalive配置往往是true，配合watch监听的话，这个值就是false。
❻ 怎样实时编译less文件成css文件
有些软件有插件可以实时编译，比如sublime。
我用的是gulp，方便前端自动化。你可以网上搜一下，用起来啊很方便。
举个例子：
vargulp=require('gulp');
varless=require('gulp-less');
varnotify=require('gulp-notify');
varplumber=require('gulp-plumber');
varconcat=require('gulp-concat');
varminifycss=require('gulp-minify-css');
varrename=require('gulp-rename');
varwatch=require('gulp-watch');
varuglify=require('gulp-uglify');
varautoprefixer=require('gulp-autoprefixer');
varlessPath='./src/less/*.less';
varlessMainPath='./src/less/main.less';
varlessDist='./src/css/';
varcssPath='./src/css/*.css';
varjsSrcPath='./src/js/*.js';
vardistPath='./dist/';
//编译less
gulp.task('lessCompile',function(){
gulp.src([lessMainPath])
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(less())
.pipe(gulp.dest(lessDist));
});
//监控less文件变化
gulp.task('watchLess',function(){
gulp.watch(lessPath,['lessCompile']);
});
//css合并压缩加前缀
gulp.task('handleCss',function(){
returngulp.src(cssPath)
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers:['last5versions','Android>=4.0'],
cascade:true,
remove:false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath));
});
//监控css文件变化
gulp.task('watchCss',function(){
gulp.watch(cssPath,['handleCss']);
});
❼ visual studio怎么编译less
工具》扩展》选择联机搜索less编译插件，我是已经安装了所以搜索略过了，安装后重启就行，打开编写less后生成一下
❽ webpack编译less
webpack loaders
webpack 编译 less 需要使用到的 loader :
* less-loader
将 less 文件编译成 CSS ；
1.创建本地项目 webpack-demo
2.在 webpack-demo 的根目录下创建 package.json 文件
模块说明：
4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置
5.安装需要的loader和依赖
6.创建一个名为 test.less 的文件
并将该文件引入 webpack 的入口文件 entry.js 中；
7.配置编译 less 的 loader
7.运行编译命令
❾ 如何使用lessc编译.less文件
这是一个简单的测试代码test.less，内容如下
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
该文件位于 E: est.less。
启动node.js控制台，进入test.less文件所在的目录，输入lessc test.less > test.css命令，less文件就会被编译成css文件
❿ grunt怎么把less编译成css文件
Grunt任务分为两部分，一部分是任务，即Grunt要执行的代码，找到对应功能的插件就成。所以等会要下载grunt-contrib-less包，这个插件便是把less文件编译成能直接使用的css。另一部分是配置，即传给grunt.initConfig方法的对象。
步骤一：在终端安装插件
同样使用到了node.js里的包管理器npm，在终端里执行下述命令：
npminstallgrunt-contrib-less--save-dev
–save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。要注意安装的目录应该是你的项目的根目录，而且本地已经装好了grunt，建立了package.json文件。package.json文件中无法包含全局安装的包，因此Grunt包和任务插件要求在本地安装Grunt，这样代码才能在不同设备中正常运行。
['public/*.less',//匹配public文件夹中拓展名为.less的所有文件'public/**.*.less',//还能匹配public文件夹的子文件中的文件，
//而且嵌套层级多深
'!public/vendor/**/*.less//和第二个作用一样，不过！符号表明
//要从结果中排除匹配的文件
]
有一点需要注意的是，不管多少个less文件，编译得到的css都只会打包到一个文件中。