即時反映がしたくてMagento2でLESSからCSSを書き出すときにgruntコマンドを使用するわけだが、これにより吐き出されるCSSは初期状態ではMagento2がデフォルトで持っているCSSの形とは違う。

 

具体的には、

• ソースマップがコメントとして書き出されている
• コンプレス設定がなされていない

以上の2点。

 

style-l.cssとstyle-m.cssはただでさえ、いろいろ書かれていて重たいCSSなので、できれば余計な文字列は削除したいものだ。

 

というわけで、下記の設定ファイルを編集する。

 

/dev/tools/grunt/configs/less.jsの大体20行目付近

var lessOptions = {
 options: {
 sourceMap: true,
 strictImports: false,
 sourceMapRootpath: '/',
 dumpLineNumbers: false, // use 'comments' instead false to output line comments for source
 ieCompat: false
 },
 setup: {
 files: {
 '<%= path.css.setup %>/setup.css': '<%= path.less.setup %>/_setup.less'
 }
 },
 updater: {
 files: {
 '<%= path.css.updater %>/updater.css': '<%= path.less.setup %>/_setup.less'
 }
 },
 documentation: {
 files: {
 '<%= path.doc %>/docs.css': '<%= path.doc %>/source/docs.less'
 }
 }
};

 

optionsの中を下記のように変更。

var lessOptions = {
 options: {
 sourceMap: false, //true→falseに変更
 compress : true, //compress追加
 strictImports: false,
 sourceMapRootpath: '/',
 dumpLineNumbers: false, // use 'comments' instead false to output line comments for source
 ieCompat: false
 },
 setup: {
 files: {
 '<%= path.css.setup %>/setup.css': '<%= path.less.setup %>/_setup.less'
 }
 },
 updater: {
 files: {
 '<%= path.css.updater %>/updater.css': '<%= path.less.setup %>/_setup.less'
 }
 },
 documentation: {
 files: {
 '<%= path.doc %>/docs.css': '<%= path.doc %>/source/docs.less'
 }
 }
};

 

これで、grunt less:テーマ名を実行した際にソースマップの非表示とコンプレス反映がなされて、CSSが書き出される。