Magento 2での空白のテーマスタイルの上書き

Magento 2の空白のテーマから継承する場合、カスタムテーマのナビゲーションスタイルをどのようにオーバーライドしますか？

フォルダーにtheme.cssファイルがありますが、app/design/frontend/<Vendor>/<theme>/web/cssMagento 2ではLESSが使用されていることを認識しています。theme.cssスタイルシート内のスタイルは簡単に上書きできますが、を使い続ける必要はありません!important。

また、私はBootstrap 3を使用していますが、空のテーマのスタイルが、Bootstrapで一致するスタイルの指示を上書きすると想定しています。これに取り組む最善の方法は何ですか？

— ガレス・デイン
ソース

回答:

親テーマのスタイルをオーバーライドまたは拡張するためにMagentoが推奨する2つの方法：

1.簡単な方法

延長：

テーマディレクトリにweb/css/sourceサブディレクトリを作成します。（この部分はすでに完了してい_extend.lessます）そこでファイルを作成します。

ドキュメントによると：

「_extend.lessを使用してテーマを拡張することは、親テーマのすべてに満足しているが、さらにスタイルを追加したい場合に最も簡単なオプションです。」

オーバーライド：

_extend.lessファイルを作成する代わりに、ファイルを作成し_theme.lessます。この場合_theme.less、変更されないものも含め、必要なすべての変数を親からコピーする必要があります。次に、変更を加えます。

ドキュメントによると、欠点は次のとおりです。

「親の_theme.lessが更新されるたびに、ファイルを監視して手動で更新する必要があります。」

2.構造化された方法

延長：

この方法では、コードをより適切に整理できます。変更が構造化されます。単一の _extend.lessファイルを使用してすべての変更を含めるのではなく、変更するMagento UIライブラリから各コンポーネントの拡張ファイルを作成します。

ボタンとナビゲーションコンポーネントからスタイルを拡張したいとします。テーマディレクトリに2つのファイルを作成します：_buttons_extend.lessおよび_navigation_extend.less、次に、各コンポーネントの変更を対応するファイルに追加します。

次に_extend.less、このコードを追加してファイルを作成します。

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

オーバーライド：

あなたのテーマでは、あなたが（変更したいUIコンポーネントに対応するファイルのコピーを作成し_buttons.less、_navigation.lessなど、）このファイルは上書きされます_buttons.less、親テーマのを。

overrideとextendの違いに注意することが重要です。

このドキュメントのオーバーライドと拡張の詳細、またはフロントエンド開発者ガイドの Magento 2のCSSについて詳しく読むことができます。

— ルイス・ガルシア
ソース

それでは、Vendor_Namespaceフォルダがあるとしましょう。「web / css / source / _extend.less」という名前の別のフォルダを追加します。web/ css / source /の_extend.less-Fileは、対応するファイルの場所を知っていますか？私はそれを正しく理解していますか

— -Max

はい、ファイルweb/css/source/_extend.lessを作成し、そこにスタイルを配置します。

— Luis Garcia

_extend.lessファイルを作成し、_slider.lessをインポートしました：<theme_folder> / css / source /両方のファイルが同じパスにありますが、機能しません。_slider.lessのすべてのルールが.cssで生成されたファイルで見つかりませんでした私は開発者モードで「php magento setup：static-content：deploy」を実行します

— xzegga

ブラウザのキャッシュを削除しましたか？

— Luis Garcia

<theme_folder> / css / source / lib / variablesをオーバーライドできますか？少ないファイルの変数を変更するにはどうすればよいですか（たとえば、@ button-backgroundをオーバーライドしたいとします）-_buttons_extend.less内に書き込むか、すべてのlin / web / css / sourceをオーバーライドできます/ lib / variables

— Goldy

Foundationを使用して同様の問題が発生しました。これを行う公式の方法は、特定のモジュールのlessファイルをオーバーライドして、そこでCSSを変更することです。その後、コンパイル時にMagentoによってピックアップされます

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

最終的に、Magentoによって作成されたデフォルトのCSSファイルをすべて削除することになりました。特にBootstrapのようなフレームワークを使用すると、さまざまなモジュールをすべてオーバーライドするよりも、カスタムCSSを書く方がはるかに簡単です。これは次の場所で行うことができます。

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— マイク・スタンプフ
ソース

何かをコミットする良い方法。しかし問題は、完全なテーマを「拡張」し、それにさらに追加することです。

— ミゲルフェリペギレンカロ2017

いいえ、問題は上書きについてです。

— ブラック

styles-m.cssをオーバーライドしてweb/css、テーマのコピーを配置し、custom-styles-m.cssという名前を付けたいとします。

次に、テーマdefault_head_blocks.xmlでこのコードを使用します。

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— ブラック
ソース