我的LESS文件是公开的/较少的,主要的被称为main.less.

将public / less / main.less编译成public / css / main.css,但源地图不起作用.

下面我的Grunt配置有什么问题？

{
    less: {
        dev: {
            options: {
                compress: true,yuicompress: true,optimization: 2,sourceMap: true,sourceMapFilename: "public/css/main.css.source-map.json",//Write the source map to a separate file with the given filename.
                sourceMapBasepath: "public/less",//Sets the base path for the Less file paths in the source map.
                sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map.
            },files: {
                "public/css/main.css": "public/less/main.less"
            }
        }
    },watch: {
        styles: {
            files: ["public/less/*"],tasks: ['less'],options: {
                livereload: true,nospaces: true
            }
        }
    }
}

我不想在我的/ public / less文件夹中创建我的CSS;我想把它放到/ public / css中.否则,我可以使用这个其他配置,其工作原理：

{
    less: {
        dev: {
            options: {
                compress: true,sourceMapFilename: "public/less/main.css.map",//I DO NOT WANT THE CSS MAP HERE
                sourceMapBasepath: "public/less",//Sets the base path for the Less file paths in the source map.
            },files: {
                "public/less/main.css": "public/less/main.less"//I DO NOT WANT THE CSS HERE
            }
        }
    },nospaces: true
            }
        }
    }
}

LESS：命令行用法
http://lesscss.org/usage/#command-line-usage-installing-lessc

NPM：无耻的
https://www.npmjs.org/package/grunt-contrib-less

文件结构：

laravel/gruntfile.js
laravel/public/less/main.less
laravel/public/css/main.css
laravel/public/css/main.css.map

文件’main.css.map’注意：

>如果你愿意,你可以重命名为：main.css.source-map.json
>我想你有一些服务器规则设置,不会从’css’文件夹正确地服务器* .map文件

压缩笔记：

> cleancss：true =将从main.css中删除sourceMappingURL注释
> yuicompress：true =不会从main.css中删除sourceMappingURL注释

Gruntfile.js

less: {
    dev: {
        options: {
            compress: true,sourceMapFilename: 'public/css/main.css.map',// where file is generated and located
            sourceMapURL: '/css/main.css.map',// the complete url and filename put in the compiled css file
            sourceMapBasepath: 'public',// Sets sourcemap base path,defaults to current working directory.
            sourceMapRootpath: '/',// adds this path onto the sourcemap filename and less file paths
        },files: {
            'public/css/main.css': 'public/less/main.less',}
    }
},watch: {
    styles: {
        files: ["public/less/*"],options: {
            livereload: true,nospaces: true
        }
    }
},

laravel /公/ CSS / main.css的

.class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */

laravel /公/ CSS / main.css.map

{"version":3,"sources":["/less/main.less"],etc...

这是Less Mixin：

.css-gradient(@from: #20416A,@to: #3D69A5) {
    background-color: @to;
    background-image: -webkit-gradient(linear,left top,left bottom,from(@from),to(@to));
    background-image: -webkit-linear-gradient(top,@from,@to);
    background-image: -moz-linear-gradient(top,@to);
    background-image: -o-linear-gradient(top,@to);
    background-image: -ms-linear-gradient(top,@to);
    background-image: linear-gradient(top,@to);
}

在Less文件中我想做这样的事情：

#div {
    width:100px;
    height:100px;
    .css-gradient (darken,10%);
}

不知道这是否可行,或者我是否应该采取其他方式.

.css-gradient(darken(#20416A,10%),darken(#3D69A5,10%))

当然你也可以这样做：

.css-gradient(@from: #20416A,@to);
}
.css-gradient(darken,@amount: 10%,@from: #20416A,@to: #3D69A5){
    .css-gradient(darken(@from,@amount),darken(@to,@amount));
}

然后打电话给它：

.css-gradient(darken,10%);

要么：

.css-gradient(#20416A,#3D69A5);

要么：

.css-gradient(darken,5%,#00ff00,#ff0000);