web-dev-qa-db-ja.com

ソースマップを使用してLESSファイルをコンパイルする

LESSファイルをコンパイルしてソースマップファイル（.css.map）CSSファイルに加えて？コマンドライン（NodeJSのlessc）とGUIベースのプログラムの両方でそれを行う方法はありますか？

csscompilationlesssource-mapslesscss-resources
15
rink.attendant.6

更新：新しい最短回答

ドキュメントが更新されました！新機能がLESSになると、ドキュメントが少し遅れることがあります。そのため、最先端の機能を探している場合は、lesscを実行して（長い回答を参照）、ポップアウトを確認することをお勧めします。ヘルプテキストの。

http://lesscss.org/usage/

短い答え

コマンドラインから次のオプションを探しています。

--source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline  puts the map (and any less files) into the output css file
--source-map-url=URL     the complete url and filename put in the less file

私がこれを書いているとき、私はマップを生成するGUIオプションを認識していません（ソースマップは過去数か月間にLESSに追加されただけです）。彼らは来年更新するので、彼らはサポートを追加すると確信しています。

より長い答え

コマンドラインからlesscをパラメーターなしで実行すると、すべてのオプションが表示されます。 （私の経験では、これは彼らのドキュメントよりも最新なので、少なくとも正しい方向に向けることができます。）最新のすべてのマップ情報を含めます。

Devに使用する最も簡単なコンボは--source-map-less-inline --source-map-map-inlineです。これにより、出力CSSに埋め込まれたソースマップが得られます。

別のマップファイルを追加する場合は、--source-mapを使用できます。これは、my.lessからmy.cssおよびmy.css.mapを出力します

参考までに、コピー（現時点では1.6.1）を実行すると、

usage: lessc [option option=parameter ...] <source> [destination]

If source is set to `-' (dash or hyphen-minus), input is read from stdin.
options:
  -h, --help               Print help (this message) and exit.
  --include-path=PATHS     Set include paths. Separated by `:'. Use `;' on Windows.
  -M, --depends            Output a makefile import dependency list to stdout
  --no-color               Disable colorized output.
  --no-ie-compat           Disable IE compatibility checks.
  --no-js                  Disable JavaScript in less files
  -l, --lint               Syntax check only (lint).
  -s, --silent             Suppress output of error messages.
  --strict-imports         Force evaluation of imports.
  --insecure               Allow imports from insecure https hosts.
  -v, --version            Print version number and exit.
  -x, --compress           Compress output by removing some whitespaces.
  --clean-css              Compress output using clean-css
  --clean-option=opt:val   Pass an option to clean css, using CLI arguments from
                           https://github.com/GoalSmashers/clean-css e.g.
                           --clean-option=--selectors-merge-mode:ie8
                           and to switch on advanced use --clean-option=--advanced
  --source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
  --source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
  --source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
  --source-map-less-inline puts the less files into the map instead of referencing them
  --source-map-map-inline  puts the map (and any less files) into the output css file
  --source-map-url=URL     the complete url and filename put in the less file
  -rp, --rootpath=URL      Set rootpath for url rewriting in relative imports and urls.
                           Works with or without the relative-urls option.
  -ru, --relative-urls     re-write relative urls to the base less file.
  -sm=on|off               Turn on or off strict math, where in strict mode, math
  --strict-math=on|off     requires brackets. This option may default to on and then
                           be removed in the future.
  -su=on|off               Allow mixed units, e.g. 1px+1em or 1px*1px which have units
  --strict-units=on|off    that cannot be represented.
  --global-var='VAR=VALUE' Defines a variable that can be referenced by the file.
  --modify-var='VAR=VALUE' Modifies a variable already declared in the file.

-------------------------- Deprecated ----------------
  -O0, -O1, -O2            Set the parser's optimization level. The lower
                           the number, the less nodes it will create in the
                           tree. This could matter for debugging, or if you
                           want to access the individual nodes in the tree.
  --line-numbers=TYPE      Outputs filename and line numbers.
                           TYPE can be either 'comments', which will output
                           the debug info within comments, 'mediaquery'
                           that will output the information within a fake
                           media query which is compatible with the SASS
                           format, and 'all' which will do both.
  --verbose                Be verbose.
21
betaorbust

コマンドラインでうまくいかない場合、Gruntはこの種のことに優れています。 grunt-contrib-lessプラグインを設定して、次のような設定でインラインマップを生成できます。

 less: {
        options: {
            sourceMap:true,
            outputSourceFiles: true
        },
        lessFiles: {
            expand: true,
            flatten:false,
            src: ['**/*.less'],
            dest: ['dist/'],
            ext: '.css',
        }
    },

https://github.com/gruntjs/grunt-contrib-less

7
am80l

少ないファイルからマップとCSSファイルを作成する例

  1. 最新のNode JSをインストールしてコマンドプロンプトに移動し、npm install lessを実行してください。
  2. コマンドプロンプトに移動して、作成するファイルフォルダーを減らします

たとえば、HelloWorld [Less File]を変更します

コマンドプロンプトでC：\ Project\CSSに移動するか、次のコマンドで正しいパスを指定します。

コマンドプロンプトで次のコマンドを実行する

lessc HelloWorld.less HelloWorld.css --source-map = HelloWorld.css.map –verbose

これで、CSSおよびMapファイルがそれぞれのフォルダーに生成されます。

詳細については、リンクを確認してください： royalarun.blogspot.com

0
Arun Prakash