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都只會打包到一個文件中。