LESS ファイルをコンパイルし.css.map
て、CSS ファイルに加えてソース マップ ファイル ( ) を出力するにはどうすればよいですか? lessc
コマンドライン (NodeJS の) と GUI ベースのプログラムの両方でそれを行う方法はありますか?
3 に答える
更新: 新しい最短の回答
ドキュメントが更新されました!新機能が LESS にヒットすると、ドキュメントが少し遅れることがあります。そのため、最先端の機能を探している場合は、実行してlessc
(より長い回答を参照)、ヘルプ テキストから何が飛び出すかを確認することをお勧めします。
簡潔な答え
コマンドラインから次のオプションをいくつでも探しています。
--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 に埋め込まれたソース マップを提供することです。
別のマップ ファイルを追加する場合は、 which を使用--source-map
して、frommy.less
を出力my.css
し、my.css.map
参考までに:コピーを実行すると(現時点ではv 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.
Less File から Map と CSS ファイルを作成する例
- 最新の Node JS をインストールし、コマンド プロンプトに移動して実行
npm install less
します。 - コマンド プロンプトに移動し、作成するファイル フォルダーを少なくします。
たとえば、HelloWorld [Less File] を変更します。
コマンド プロンプトで C:\Project\CSS に移動するか、以下のコマンドで正しいパスを指定します。
コマンドプロンプトで次のコマンドを実行します
lessc HelloWorld.less HelloWorld.css --source-map=HelloWorld.css.map –verbose
これで、CSS とマップ ファイルがそれぞれのフォルダーに生成されます。
詳細については、次のリンクを確認してください。royarun.blogspot.com