Shopware 6：如何在管理端Sass/CMS元素中访问主题Sass变量

管理端与店铺前端的Sass变量属于独立的编译上下文，默认无法直接互通，以下是几种可行的解决方法：

方法1：直接导入前端主题变量文件 #

找到Shopware前端的主题变量文件（默认路径为vendor/shopware/storefront/Resources/app/storefront/src/scss/variables/_colors.scss，自定义主题则在对应主题的src/scss/variables目录下），在你的CMS元素SCSS文件开头导入该文件：

// 注意根据插件实际位置调整路径
@import '../../../../../../../../vendor/shopware/storefront/Resources/app/storefront/src/scss/variables/_colors.scss';

.my-class {
  color: $sw-color-brand-primary;
}

方法2：同步变量定义到管理端 #

如果需要固定使用某套主题变量，可在管理端单独定义与前端一致的变量：

1. 在插件的src/Resources/app/administration/src/scss/目录下创建variables.scss，写入与前端匹配的变量：

$sw-color-brand-primary: #你的品牌主色;

2. 在src/Resources/app/administration/src/main.js中导入这个变量文件：

import './scss/variables.scss';

之后你的CMS元素SCSS文件就能直接使用该变量。

方法3：使用CSS自定义属性（推荐） #

Shopware前端主题会自动将Sass变量转换为全局CSS自定义属性，你可以跳过Sass变量，直接在管理端SCSS中使用这些自定义属性：

.my-class {
  color: var(--sw-color-brand-primary);
}

CMS预览区域会加载店铺主题的CSS自定义属性，这种方式无需额外导入文件，兼容性更好。

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