magento前端css之-引入样式文件

7天成为Magento系统架构师,现在开始学习Magento全栈开发!

《Magento2.X企业级开发实战》

magento前端css之-引入样式文件

在 Magento 应用程序中,CSS 文件包含在布局文件中。

从技术上讲,可以选择将它们包含在模板文件中,但我们强烈建议避免这种情况。

CSS 类名可以在模板和布局中指定。
本主题描述默认情况下如何在 Magento 应用程序文件系统中定位样式表,以及在布局中包含 CSS 文件的推荐方法。

Magento 样式表文件的组织方式
传统上,CSS 和 Less 文件仅存储在主题中。 模块目录不包含任何默认样式。

在主题目录中,样式表存储在以下位置:

Directory, relative to <theme_dir> Description
/<Namespace>_<Module>/web/css Module-specific styles.
/web/css Contains the following:
  • print.less: used to generate styles for the printed version of store pages.
  • _styles.less – a composite file, which includes all Less files used in the theme. The underscore sign (“_”) in a file name conventionally means that a file is not used independently, but is included in other files.
  • styles-m.less: used to generate mobile-specific styles, includes _styles.less.
  • styles-l.less: used to generate desktop-specific styles, includes _styles.less.
  • /source: this subdirectory contains Less configuration files that invoke mixins from the Magento UI library.
  • /source/_theme.less: overrides the default Magento UI library variables values.

包含 CSS
在 Magento 应用程序中,推荐的包含样式表的方法是在布局文件中指定它们。

通常,您包含的样式表应该可用于所有商店页面。 为此,请将您的 CSS 包含在 Magento_Theme 模块的 default_head_blocks.xml 中,该模块定义了所有 Magento 页面的默认 页面部分。 推荐的方法是在您的主题中添加一个扩展的 default_head_blocks.xml,并在此文件中包含所需的样式表。

您的自定义 default_head_blocks.xml 应位于如下位置:

/Magento_Theme/layout/default_head_blocks.xml。

要包含 CSS 文件,请在布局文件的 部分中添加 是相对于主题 web 目录 (/web) 指定的

例如,要包含 /web/css/custom.css:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/custom.css" rel="stylesheet" type="text/css"  />
    </head>
</page>

下面说明了如何将样式表包含在默认的空白主题中:

[/Magento_Theme/layout/default_head_blocks.xml]

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css" />
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print" />
    </head>
</page>

要包含外部 CSS 文件,请添加 。

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"  src_type="url" rel="stylesheet" type="text/css"  />
    </head>
</page>
如无特殊说明或标注,任何个人或组织,复制、转载、采集本站内容请注明:
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。