【问题标题】: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.xmlregistration.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' }
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-01
    • 2012-11-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多