web-dev-qa-db-fra.com

Compiler les fichiers LESS avec les cartes sources

Comment puis-je compiler un fichier LESS pour générer un fichier de carte source (.css.map) en plus d'un fichier CSS? Y a-t-il un moyen de le faire à la fois en ligne de commande (lessc de NodeJS) et sur tout programme basé sur une interface graphique?

csscompilationlesssource-mapslesscss-resources
12
rink.attendant.6

Mise à jour: nouvelle réponse la plus courte

Les docs ont été mis à jour! Lorsque de nouvelles fonctionnalités apparaissent sur LESS, les documents sont parfois un peu en retard. Par conséquent, si vous recherchez des fonctionnalités à la fine pointe, il est probablement préférable de lancer lessc (voir la réponse plus longue) et de vérifier ce qui ressort du texte d'aide.

http://lesscss.org/usage/

Réponse courte

Vous recherchez un nombre quelconque des options suivantes à partir de la ligne de commande:

--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

Au moment où j'écris ces lignes, je ne connais aucune option de l'interface graphique générant des cartes (les cartes sources n'ont été ajoutées à LESS qu'au cours des derniers mois) - désolé de ne pas avoir de meilleures nouvelles. Je suis sûr qu'ils ajouteront un support lors de la mise à jour au cours de la prochaine année.

Réponse plus longue

Si vous exécutez lessc à partir de la ligne de commande sans aucun paramètre, cela vous donnera toutes les options. (D'après mon expérience, cette documentation est plus à jour que la documentation précédente, ce qui vous permettra au moins de vous orienter dans la bonne direction.) Avec toutes les informations cartographiques les plus récentes incluses.

La combinaison la plus simple à utiliser pour dev est --source-map-less-inline --source-map-map-inline car cela vous donnera vos cartes source intégrées dans votre css en sortie.

Si vous souhaitez ajouter un fichier de carte séparé, vous pouvez utiliser --source-map qui, à partir de my.less, générera my.css et my.css.map.

Pour référence: quand je lance ma copie (v 1.6.1 pour le moment) je reçois

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.
20
betaorbust

Si la ligne de commande ne vous convient pas, Grunt est excellent dans ce genre de choses. Vous pouvez configurer le plugin grunt-contrib-less pour générer des cartes en ligne avec une configuration comme celle-ci:

 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

Exemple pour créer une carte et un fichier CSS à partir de moins de fichier

  1. Installez le dernier nœud JS et accédez à la commande Invite et exécutez npm install less. Désormais installé avec moins de succès
  2. Accédez à l'invite de commande et déplacez-vous vers un dossier moins important que nous allons créer.

Par exemple, je vais changer HelloWorld [Less File]

Dans l'invite de commande, accédez à C:\Project\CSS ou indiquez le chemin correct dans la commande ci-dessous.

Exécuter la commande suivante dans l'invite de commande 

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

Le fichier CSS et Map est maintenant généré dans le dossier respectif.

Pour plus de références, consultez le lien: royalarun.blogspot.com

0
Arun Prakash