如何在magento 2的自定义主题中覆盖CSS文件答案

【问题标题】：How to override CSS file in custom theme in magento 2如何在magento 2的自定义主题中覆盖CSS文件
【发布时间】：2017-05-09 05:30:26
【问题描述】：

在 Magento 2 中，我创建了新主题。我尝试添加较少的文件 app/design/frontend/mage_vender/sample(theme)/web/css/source‌/_extend.less。但它没有显示出变化。请谁能告诉我，我们该怎么办？我正在使用 magento 2.1.3 谢谢

【问题讨论】：

您是否将新主题添加到了themes.js 中？
不行，我该怎么办？

标签： magento2

【解决方案1】：

我们有另一种方法。

首先，创建一个新的 less 文件，然后将其添加到您的 _extend.less 文件中，如下所示。

@import 'theme/slick.less';

之后，如果你使用 grunt 则需要做以下事情。

/dev/tools/grunt/configs/themes.js
<theme_name>: {
area: 'frontend',
name: '/',
locale: en_US,
files: [
'<path_to_file1>', //path to root source file ex: css/styles-m
'<path_to_file2>' ex: 'css/styles-l'
],
dsl: 'less'

添加上述内容后，请运行以下命令。

grunt clean:theme
grunt exec:theme
grunt less:theme
chmod 0777 -R var/*
chmod 0777 -R pub/*
chmod 0777 -R generated/*
grunt watch

如果您仍然遇到任何问题，请检查并告诉我们。

【讨论】：

【解决方案2】：

您需要做的第一件事是创建主题，不要忘记添加所有必需的文件，例如 theme.xml 和 registration.php。上次我检查了 magento 2 文档时，它是最新的，并且有足够的关于如何创建新主题的信息。

您需要做的第二件事是将新主题添加到theme.js，否则您将无法将新的less文件编译成CSS。为此，您可以将一个新的 json 组添加到 /dev/tools/grunt/configs/themes.js

现在要覆盖更少的文件，例如让我们说 _navigation.less 您只需将其放在 /app/design/frontend/[YOUR_THEME]/web/css/source/_navigation.less 下即可

然后做一个grunt refresh，当你添加新文件时你总是这样做，如果你正在编辑一个已经添加的文件，你总是这样做grunt watch。

【讨论】：

你好安德烈，我按照这些步骤操作，但在这里不起作用:(
请你告诉我为什么它不起作用，我使用了这个 Json 组示例：{ area: 'frontend', name: 'Magestore/sample', locale: 'en_US', files: [ 'css/source/_extend' ], dsl: 'less' }