1

我正在尝试将我的less文件编译为css,我正在使用dotless

我用nuget. 这是我在项目“预构建事件命令行”中设置的设置

“$(SolutionDir)packages\dotless.1.3.1.0\tool\dotless.compiler.exe” 
“$(ProjectDir)Content\style.less” 
“$(ProjectDir)Content\style_less.css”

构建时发生的事情是它只是style.less在记事本中打开文件并停在那里。当我关闭less文件时,它会打开输出css(空)和相同的故事在这里它只是停止,当我关闭css它时它会进行常规构建。

想法?需要时间吗?这种行为正常吗?

编辑

有没有其他方法可以在 Windows 环境中编译 LESS?

4

2 回答 2

2

正如我在一些问题评论中所说,因为 DotLess 对我不起作用,所以我改用其他方法:使用官方 LESS 编译器(JavaScript 编译器)编译 LESS 并使用 Windows Script Host 执行。

在您的解决方案目录中创建一个文件夹(即为您的特定解决方案存储您的.sln和项目目录的位置)。将您的文件夹称为Build

你需要这些脚本(在Build文件夹中为每个脚本创建一个文件,我给你整个文件名):

lessc.wsf

<!--
Less.js compiler for Windows Script Host
http://blog.dotsmart.net/

Copyright (c) 2010, Duncan Smart
Licensed under the Apache 2.0 License.
-->
<job>
<script language="jscript">
     // Stub out globals
    var window = this;
    var location = window.location = { 
        port: 0,
        href: ''
    };
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var input = null;

    var util = {
        readText: function (filename) {
            //WScript.StdErr.WriteLine("readText: " + filename);
            var file = fso.OpenTextFile(filename);
            // Don't error on empty files
            var text = file.AtEndOfStream ? '' : file.ReadAll();

            // Strip off any UTF-8 BOM
            var utf8bom = String.fromCharCode(0xEF, 0xBB, 0xBF);
            if (text.substr(0, utf8bom.length) == utf8bom) {
                text = text.substr(utf8bom.length);
            }
            file.Close();
            return text;
        }
    };

    // XMLHttpRequest that just gets local files. Used when processing "@import"
    function XMLHttpRequest(){}
    XMLHttpRequest.prototype = {
        open: function (method, url, async) {
            this.url = url;
        },
        send: function () {
            // get the file path relative to the input less file/directory
            var currDir = fso.folderExists(input) ? input : fso.getParentFolderName(input);
            var filename = fso.BuildPath(currDir, this.url);

            //WScript.StdErr.WriteLine("XHR.send " + filename);

            // Little hack so *.less will resolve to *.less.css also. Helps with Visual Studio 
            // ensuring that file BuildAction is set to Content and you get rudimentary syntax highlighting with no set up.
            if (filename.match(/.less$/i) && !fso.FileExists(filename)) {
                filename = filename.replace(/.less$/i, '.less.css');
            }

            try {
                this.status = 200;
                this.responseText = util.readText(filename);
            }
            catch (e) {
                this.status = 404;
                this.responseText = e.description;
            }
        },
        setRequestHeader:  function () {},
        getResponseHeader: function () {}
    };

    // Fake document
    var document = {
        _dummyElement: {
            childNodes: [], 
            appendChild: function(){},
            style: {}
        },
        getElementsByTagName: function(){ return []; },
        getElementById: function(){ return this._dummyElement; },
        createElement:  function(){ return this._dummyElement; },
        createTextNode: function(){ return this._dummyElement; }
    };        

</script>

<!-- less.js from https://github.com/cloudhead/less.js/tree/master/dist/ -->
<script language="jscript" src="less.js" />

<script language="jscript"> 
    // Parse args
    var args = {};
    for (var i = 0; i < WScript.Arguments.Length; i++) {
        var arg = WScript.Arguments.Item(i);
        // Handle "-switch" and "--switch"
        var match = arg.match(/^--?([a-z][0-9a-z-]*)$/i);
        if (match) {
            i = match[1];
            arg = true;
        }
        args[i] = arg;
    }

    input = args[0];
    var output = args[1];

    if (fso.folderExists(input)) {
        input = fso.getAbsolutePathName(input);
        var files = getFiles(input, /\.less$/i);
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            convert(file.path, output + '\\' + file.name.replace( /\.less$/i, '.css'));
        }
    }
    else {
        if (fso.folderexists(output)) {
            output = fso.getAbsolutePathName(output) + '\\' + fso.getfile(input).name.replace(/\.less$/i, '.css');
        }
        convert(input, output);
    }

    // Returns array of {name:'foo.bar', path:'c:\baz\foo.bar'} for given directory and pattern
    function getFiles(dir, regex) {
        var e = new Enumerator(fso.getFolder(dir).files);
        var files = []
        for (; !e.atEnd(); e.moveNext()) {
            if (regex.test(e.item().path)) {
                files.push({
                    name: e.item().name, 
                    path: e.item().path
                });
            }
        }
        return files;
    }

    function convert(input, output) {
        if (!input) {
            WScript.StdErr.WriteLine("lessc.wsf: no input files");
            WScript.StdErr.WriteLine("Usage:");
            WScript.StdErr.WriteLine("  Single file: cscript //nologo lessc.wsf input.less [output.css] [-compress]");
            WScript.StdErr.WriteLine("  Directory:   cscript //nologo lessc.wsf inputdir outputdir [-compress]");
            WScript.Quit(1);
        }

        var data;
        if (input == '-') {
            var chunks = [];
            while (!WScript.StdIn.AtEndOfStream)
            chunks.push(WScript.StdIn.ReadAll());
            data = chunks.join('');
        }
        else {
            data = util.readText(input);
        }

        var parser = new less.Parser({
            filename: input
        });

        try {
            parser.parse(data, function (err, tree) {

                if (err) {
                    WScript.StdErr.WriteLine("ERR: ");
                    for (var i in err) {
                        if (err[i]) {
                            WScript.StdErr.WriteLine("  " + i + ': ' + err[i]);
                        }
                    }
                    WScript.Quit(2);
                }
                else {
                    var css = tree.toCSS({
                        compress: args.compress
                    });
                    if (output) {
                        if(fso.FileExists(output))
                    {
                       var checkfile = fso.GetFile(output);
                       if(checkfile.Attributes & 1)
                       {
                           checkfile.Attributes = checkfile.Attributes ^ 1
                       }
                    }
                        var outputfile = fso.CreateTextFile(output);
                        outputfile.Write(css);
                        outputfile.Close();
                    }
                    else {
                        WScript.StdOut.Write(css);
                    }
                }
            });
        }
        catch (e) {
            WScript.StdErr.WriteLine("ERROR:");
            for (var i in e) {
                if (e[i]) {
                    WScript.StdErr.WriteLine("  " + i + ': ' + e[i]);
                }
            }
            WScript.Quit(3);
        }

        // Sometimes less will return errors inside the fake HTML element
        if (document._dummyElement.innerHTML && document._dummyElement.innerHTML.match(/Syntax Error/i)) {
            var s = document._dummyElement.innerHTML;
            s = s.replace(/<[^>]+(\/?)>/g, function (m) { return m.indexOf('/') > 0 && m !== '</label>' ? "\n" : '' });
            s = s.replace(/\n+/g, '\n');

            WScript.StdErr.WriteLine("ERR: ");
            WScript.StdErr.WriteLine(s);
            WScript.Quit(2);
        }
    }
</script>
</job>

小号.cmd

::For convenience
@cscript //nologo "%~dp0lessc.wsf" %*

少目标

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
  <DotLessCompilerPath>$(SolutionDir)Build\lessc.cmd</DotLessCompilerPath>
</PropertyGroup>
  <Target Name="AllLessToCss" AfterTargets="AfterBuild">
    <CreateItem Include="$(ProjectDir)**\*.less">
      <Output TaskParameter="Include" ItemName="LessFile" />
    </CreateItem>

    <Message Text="" Importance="high" />
    <Message Text="Now compiling LESS files..." Importance="high" />
    <Message Text="------------------------------------------------------------" Importance="high" />
    <Message Text="" Importance="high" />
    <Message Text="File: &quot;%(LessFile.FullPath) ======>>>>> &quot;%(LessFile.RootDir)%(LessFile.Directory)%(LessFile.FileName).css&quot;" Importance="high" />

    <Exec Command="&quot;$(DotLessCompilerPath)&quot; &quot;%(LessFile.FullPath)&quot; &quot;%(LessFile.RootDir)%(LessFile.Directory)%(LessFile.FileName).css&quot; -compress"  />

    <Message Text="" Importance="high" />
    <Message Text="------------------------------------------------------------" Importance="high" />
    <Message Text="" Importance="high" />
  </Target>
</project>

一旦您在Build文件夹中创建了整个文件,您需要修改您的 ASP.NET 应用程序项目文件(即.csproj)。为了修改项目文件,您需要在 Visual Studio IDE 中卸载项目(在解决方案资源管理器中右键单击项目节点并选择“卸载项目”)

现在再次右键单击卸载的项目并选择“编辑项目文件”。转到项目文件的末尾,在</project>添加以下 XML 代码之前:

<Import Project="$(SolutionDir)Build\less.targets" />

最后,在 Visual Studio 中重新加载您的 ASP.NET 项目,构建它,如果一切顺利,您将找到任何 ASP.NET 项目 LESS (.less) 文件的“.css”对应项!

于 2012-11-12T10:56:51.783 回答
0

我在我的项目中手动安装了 Less.net,这是在我的 Pre-Build 活动中:

If "$(ConfigurationName)" == Debug (
FOR %%i IN ("$(ProjectDir)css\*.less") DO ("$(ProjectDir)Tools\dotless.Compiler.exe" "%%i" )
) Else (
FOR %%i IN ("$(ProjectDir)css\*.less") DO ("$(ProjectDir)Tools\dotless.Compiler.exe" -m "%%i" )
)

此代码将查看 css 文件夹并将所有 .less 文件转换为 css 文件,当项目处于调试模式时 css 将是可读的,否则它将被压缩。不要忘记更改路径,以便它在您的环境中工作。如果您的 .less 文件中有错误,则错误和行号将显示在“输出”窗口中。

于 2012-11-12T12:03:05.133 回答