更改 Magento 2.0 主题中的 CSS答案

【问题标题】：Change CSS in Magento 2.0 Theme更改 Magento 2.0 主题中的 CSS
【发布时间】：2016-01-26 19:08:28
【问题描述】：

我使用 Magento Blank 作为父主题。

我在/app/design/frontend/MYVENDORNAME/MYTHEMENAME/web/css/source/ 中创建了包含此代码的_theme.less.css：

@button-primary__background: @color-orange-red1;
@button-primary__hover__background: @color-orange-red4;
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;

我已经刷新了缓存。

但按钮仍然是蓝色的。

我做错了什么？

【问题讨论】：

以devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/…开头。

标签： css less magento2 magento-2.0

【解决方案1】：

此代码需要进入 .less 文件并编译为 .css 文件，因为这不是可以在 css 文件中本机读取的代码样式。

【讨论】：

【解决方案2】：

首先添加您的自定义 css

转到：

/app/design/frontend/Magento/MYVENDORNAME/MYTHEMENAME/layout/default_head_blocks.xml

在 head 块下添加 css 如下所示：

<head><css src="css/custom.css" /></head>

然后在此路径中创建 custom.css 文件：

/app/design/frontend/Magento/MYVENDORNAME/MYTHEMENAME/web/css/custom.css

运行你的 css，希望它对你有用。

【讨论】：

【解决方案3】：

您所要做的就是从以下位置复制文件：

/vendor/magento/theme-frontend-blank/web/css/

进入主题目录：

/app/design/frontend/MYVENDORNAME/MYTHEMENAME/web/css/

您不必移动所有文件，只需替换要更改的文件即可。

我认为您必须学习 LESS 才能正确设置主题样式。但是对于简单的 static CSS 更改，这可能会起作用：

1) 添加/dev1/vendor/magento/theme-frontend-blank/web/css/_styles.less，内容如下：

@import 'source/lib/_lib.less'; // Global lib
@import 'source/_sources.less'; // Theme styles
@import 'source/_components.less'; // Components styles (modal/sliding panel)

body{background:#f00}

【讨论】：