PrestaShop 1.7后台New-Theme如何创建CSS覆盖文件？

New-Theme采用模块化CSS加载机制，没有预设的override.css文件，但可以通过以下两种方式添加自定义样式，实现测试/生产环境区分及颜色调整：

方法一：通过自定义模块加载（推荐，版本更新不丢失修改） #

这种方式无需改动核心文件，是最稳妥的方案：

• 在你的自定义模块目录下创建views/css/admin-custom.css，写入样式规则，比如给测试环境顶部导航加醒目标识：

/* 测试环境专属样式 - 顶部导航栏背景色 */
#header .top-bar {
    background-color: #dc3545 !important;
}
/* 其他自定义颜色调整 */

• 在模块主PHP文件（如mymodule.php）中添加后台样式加载逻辑：

public function hookBackOfficeHeader()
{
    // 仅在New-Theme页面加载自定义样式
    if (Context::getContext()->controller->module instanceof ModuleAdminNewTheme) {
        $this->context->controller->addCSS($this->_path . 'views/css/admin-custom.css');
    }
}

• 安装并启用该模块，自定义样式会自动加载到所有New-Theme后台页面。

方法二：直接修改New-Theme核心文件（不推荐，版本更新会丢失） #

若不想使用模块，可直接修改主题文件，但每次PrestaShop升级后需重新操作：

• 找到New-Theme的未编译源码目录：./adminFolder/themes/new-theme/src/css/custom，创建custom-override.css并写入你的样式；
• 找到主题的webpack配置文件，将custom-override.css加入编译列表，重新编译生成新的theme.css（需具备前端编译基础）。

测试/生产环境区分技巧 #

通过PHP环境变量动态加载不同样式，比如在模块的hookBackOfficeHeader方法中：

public function hookBackOfficeHeader()
{
    if (Context::getContext()->controller->module instanceof ModuleAdminNewTheme) {
        // 开发/测试环境加载专属样式，生产环境加载默认样式
        if (_PS_MODE_DEV_) {
            $this->context->controller->addCSS($this->_path . 'views/css/admin-test.css');
        } else {
            $this->context->controller->addCSS($this->_path . 'views/css/admin-prod.css');
        }
    }
}

内容的提问来源于stack exchange，提问作者Mike