less無法自動編譯為css

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

B. less文件怎麼生成css webstorm

webstorm需要配置一下，可以自動編譯Less生成css。

進入設置界面4.完成之後，直接創建less文件會自動生成css.

C. phpstorm怎麼讓less自動生成css

配置PhpStorm
在PhpStorm中新建一個LESS文件，PhpStorm將提示你添加FileWatcher，或者通過Settings->Tools->File Watcher進入File Watcher界面添加一個LESS的File Watcher

添加界面如下：

我們主要修改的是Arguments和Output paths to refresh。
Arguments: --no-color --source-map=../css/$FileNameWithoutExtension$.css.map $FileName$
Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css: $FileParentDir$/css/$FileNameWithoutExtension$.css.map
最終生成的目錄結構：

好了，經過這樣的設置就能使用PhpStorm自動編譯LESS了。

D. less文件編譯自動會轉出一個css嗎

是的，如果已經指定了編譯後文件的位置所在，如果沒有css文件，編譯後會自動生成一個css文件在該位置，不管是用less.js還是比如koala之類的編譯工具都是這樣的。

E. less轉為css

less是預處理css，使我們寫css更方便快速，它類似於css和js的結合體，有js的特徵但寫出來是css。less的學習成本幾乎為0 ，只要你會寫css就會寫less。下面是如何將less文件轉換成css文件：

• Less官網：

• Less中文網：（結合以下兩個網站看）

less是基於node環境，所以使用less必須安裝node環境。
node環境安裝可以參考這里：Node環境安裝

• 在項目根目錄中的css文件夾中新建main.less文件並寫好（根據需要命名文件，後綴必須是.less。例如：base.less ）。

• 在less文件根目錄中（就是css文件夾內）
  ①Shift+滑鼠右擊 打開命令小黑窗口
  

閱讀全文

版權聲明：本文為博主原創文章，未經博主允許不得轉載。

F. 怎樣實時編譯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']);
});

G. sublime中less變css怎麼使用

1、安裝less插件
ctrl+shift+p -> install package -> less 即可安裝
功能：LESS高亮插件
簡介：sublime沒有支持less的語法高亮，所以這個插件可以
使用：打開.less文件或者設置為less格式
2、安裝less2css插件
ctrl+shift+p -> install package -> less2css 即可安裝
less2css插件安裝好後需要修改系統的環境變數，將less.js-window下載到本地後，將其目錄位置添加到系統環境變數中
功能：
當保存less文件的時候自動生成同名的css文件；
當保存less文件的時候提示編譯錯誤信息；
批量編譯項目目錄下的所有less文件為css文件。
具體功能設置可以修改該插件的setting-user參數，記住是先將setting-default里的參數復制到setting-user中在修改
使用：
ctrl+s即可將編寫的less文件自動編譯為css文件。

H. Visual Studio Code能不能用LESS工具編寫自動生成CSS

可以的，免編寫，只需安裝一個插件：easy less。可以安裝下，會默認生成css文件到less文件所在的目錄。這是插件實現的（我想node.js是必須安裝的）。
還有一種：項目任務型，高度的自定義（你可能需要單獨的npm項目或者叫node項目）。

I. 如何用sublimeText3編寫less並用Nodejs自動編譯成css

1、安裝Sublime 插件

（1）安裝LESS插件：
因為Sublime不支持Less語法高亮，
所以，先安裝這個插件，

• 方法1： (首先確保sublime上已安裝了Package Control) 按住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，就搞定啦！

J. 如何用webstorm把less文件生成css

webstorm 里的file watcher就是用來將less文件自動生成css文件的，在使用file watcher之前你需要安裝node.js並在node環境下安裝less，安裝完畢後webstorm會自動捕捉到lessc.cmd的安裝路徑，你也可以在settings→Tools→file Watcher下添加新的watcher，配置好之後，你編寫的less文件就會自動轉譯成css文件。