magento前端css之-引入样式文件
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：
<pre class="wp-block-preformatted"><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></pre>
下面说明了如何将样式表包含在默认的空白主题中：
[/Magento_Theme/layout/default_head_blocks.xml]
<pre class="wp-block-preformatted"><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>
</pre>
要包含外部 CSS 文件，请添加 。
<pre class="wp-block-preformatted"><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></pre>
本文转载自：Magento中文网
