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文件。