タグ付けされた質問 「less」

今週の大半は、magento-blankテーマ全体をコピーすることなく、カスタムテーマを適切に作成し、既存のLESS / CSSを拡張する方法に関する明確なガイドを見つけるために費やしました。 公式ドキュメントでは、変数のオーバーライドの基本を説明していますが、その使用方法は限られています。たとえばSonassiのような既存のガイドは、Magento 2のベータリリースに基づいているようです。 Magento 1から、LESSがどのように機能し、MagentoがすべてのファイルをCSSに収集する方法を理解するための学習曲線が少しありました。ガイドの一部を掘り下げて、どのファイルを変更するのか、いつ、そして見つけたものを共有するのかを明確な答えを得るのに時間がかかりましたので、将来のユーザー（および将来の私）がLESS Magento 2。

34 magento2  theme  less 

とを使用_module.lessしてテーマを拡張するのに違いはあります_extend.lessか？モジュール/テーマを拡張するときのベストプラクティスは何ですか？ 私が最初に考えたのは_module.less、新しいモジュールをスタイリングするとき、および_extend.lessモジュールを拡張するときに使用する方が良いということでした。しかし、Lumaは_module.less、空白のテーマを拡張するときに、理論が窓から外れるようにするために使用します。 それらの間で私が見ることができる唯一の違い_module.lessは、レスポンシブライブラリの前にインポートされることと_theme.less、as _extend.lessがそれらの後にインポートされることです。 これがインポートされる順序です vendor/magento/theme-frontend-blank/web/css/styles-l.less // // Blank theme desktop styles // _____________________________________________ // These desktop styles are added to mobile // // Global lib + theme styles // --------------------------------------------- @import '_styles.less'; @import (reference) 'source/_extends.less'; // // Magento Import instructions // --------------------------------------------- //@magento_import 'source/_module.less'; // Theme modules //@magento_import 'source/_widgets.less'; …

22 magento2  frontend  view  less-css  less 

それでは、<module>/web/css/source/module/たとえば、より少ないファイルのコンテンツを拡張する最良の方法はどれMagento_Checkout/web/css/source/module/_minicart.lessですか？ それを想定して A）オーバーライド テーマ関連の少ない親テーマと同じ名前のlessを作成（またはコピー）し、次のようにテーマに配置する必要がありますtheme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less モジュール固有のless親テーマと同じ名前のlessを作成（またはコピー）し、次のようにテーマに配置する必要がありますtheme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less UI lib lessライブラリライブラリフォルダーに同じ名前のコンテンツでlessを作成（またはコピー）し、次のようにテーマに入れますmagento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less そしてへ B）延長 テーマ関連の少ないテーマで _extend.lessファイルを作成し、このような名前で_extendを追加<your-theme>/web/css/source/_navigation_extend.lessして拡張し、web / css / sourceのテーマコンテンツの_extend.lessで@importディレクティブでtheme-frontend-blank/web/css/source/_navigation.lessそのファイルを登録する必要があります->@import "_navigation_extend.less" 特定のモジュール以下<your-theme>Magento_CatalogSearch/web/css/source/_extend.lessでは、Magento_CatalogSearchの元の_module.lessを拡張するこのようなテーマモジュールパスに_extend.lessファイルを作成する必要があります UI 11bが少なく、あなたが追加したフォルダ以下のライブラリに同じ名前のコンテンツとを作成する必要があります_extendを次のように名前に<your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.less拡張するmagento2-base/lib/web/css/source/lib/_buttons.lessと、そのファイルを、レジスタ@importのウェブ/ CSS /ソース内のテーマコンテンツの_extend.lessで指示- >@import "lib/_buttons_extend.less" 理論では、_minicart_extend.lessを作成するように提案する必要がありますが、自動的には機能しません。B1またはB3で説明したように、そのモジュールの_extend.lessにそのファイルをインポートする必要がありますか？ また、これらのコンポーネントを拡張する正しい方法であるが、_extend.lessにインポートする必要がある場合、これらのコンポーネントは拡張が少ないため、CSSの解析に自動的に含まれません。 （ここでは別の質問も来：との違い何web/css/source/lib/_buttons.lessとはweb/css/source/_buttons.less？😕） 私は少し混乱しています。誰かが私を助けてくれることを願っています。 この長いテキストでごめんなさい。 ソース： http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html http://inchoo.net/magento-2/working-with-css-in-your-first-magento-2-project/comment-page-1/#comment-434125

14 magento-2.1  less  extend 

Magento 2のlibドキュメントには、次のものが含まれています。 @ media-common：true | false-共通のスタイルを出力するかどうかを設定します。使用する必要があるいくつかのスタイルを追加するたびに一般的なスタイルの場合 & when (@media-common = true) { your styles } 質問 これを使用することとそれなしでLessを書くことの違いは何ですか？といった： & when (@media-common = true) { body { background: blue; } } それはどのようにコンパイルされますか？ body { background: blue; } styles-l.cssとstyles-m.cssに関係なく出力されませんか？

12 magento2  less-css  less  static-content 

オーバーライドlib/web/mage/gallery/gallery.lessしたいので、いくつかのモジュールファイル lib / web / mage / gallery / module / *。less 商品ギャラリーの画像のスタイルを変更したいので、オーバーライドする必要があります。 オーバーライドする方法または「質問を解決する」他の方法はありますか？

10 magento2  magento-2.1  overrides  less  gallery 

Magento 2の空白のテーマから継承する場合、カスタムテーマのナビゲーションスタイルをどのようにオーバーライドしますか？ フォルダーにtheme.cssファイルがありますが、app/design/frontend/<Vendor>/<theme>/web/cssMagento 2ではLESSが使用されていることを認識しています。theme.cssスタイルシート内のスタイルは簡単に上書きできますが、を使い続ける必要はありません!important。 また、私はBootstrap 3を使用していますが、空のテーマのスタイルが、Bootstrapで一致するスタイルの指示を上書きすると想定しています。これに取り組む最善の方法は何ですか？

10 magento2  overrides  css  less 

Magento 2（v2.1.8）の新規インストールを見るGruntfile.jsとpackage.json、Magentoがgrunt-autoprefixerを使用していることがファイルとファイルからわかります これはすばらしいです。CSSオートプレフィックスは本当に便利です。しかし、MagentoのGruntfileでそれを使用する方法がわかりません。 また、これはライブ環境のプロダクションモードでどのように機能しますか？Magento2はプロダクションモードでPHP LESSコンパイラを使用しませんが、Gruntは開発に使用されているだけです。 Gruntfile.js /** * Production preparation task. */ prod: function (component) { var tasks = [ 'less', 'autoprefixer', 'cssmin', 'usebanner' ] package.json "devDependencies": { "glob": "^5.0.14", "grunt": "^0.4.5", "grunt-autoprefixer": "^2.0.0", 私は走りましたgrunt autoprefixer、そしてそれはまた働くようではないようです。 $ grunt autoprefixer Running "autoprefixer:setup" (autoprefixer) task Autoprefixer's process() method is deprecated and will …

9 magento2  less  grunt  less-compilation 

デフォルトでは、パンくずリストは次のようになります。ホームページ>カテゴリ>製品。 大なり記号（>）を変更したいと思います。それを生成するコードは vendor/magento/magento2-base/lib/web/css/source/lib/_breadcrumbs.less 次のようになります： .lib-breadcrumbs( ... // Breadcrumbs separating symbol @_breadcrumbs-separator-symbol: @breadcrumbs-separator__symbol, ... & when not (@_breadcrumbs-separator-symbol = '') and not (@_breadcrumbs-separator-symbol = false) { // Insert separating symbol to "content" .item:not(:last-child) { &:after { .lib-css(color, @_breadcrumbs-separator-color); .lib-css(content, @_breadcrumbs-separator-symbol); } } } 私が定義を見つけた唯一の場所@breadcrumbs-separator__symbolは vendor/magento/magento2-base/lib/web/css/source/lib/variables/_breadcrumbs.less falseと定義されている場合 @breadcrumbs-separator__symbol: false; @breadcrumbs-separator__symbol結果をオーバーライドすると、奇妙なシンボルが表示されます。 私が選んだシンボルの代わりに。 さらに混乱を招くように、生成されたhtmlでは、シンボルの内容が …

7 magento2  overrides  breadcrumbs  less