如何在Shopware 6的Administration中使用Storefront的SCSS Variables？

Shopware 6 的 Administration 与 Storefront为相互独立的前端构建体系，默认不共享SCSS变量，可按以下步骤配置实现变量复用：

1. 迁移变量文件 #

将你在Storefront中定义的SCSS变量文件（插件默认路径为src/Resources/app/storefront/src/scss/variables.scss，主题默认路径为src/Resources/app/storefront/src/scss/base/variables.scss）复制到对应扩展的Administration资源路径下：

• 插件路径：src/Resources/app/administration/src/scss/variables.scss
• 主题路径：src/Resources/app/administration/src/scss/variables.scss

2. 组件内局部导入使用 #

在需要用到变量的Vue单文件组件<style lang="scss">块顶部直接导入变量文件即可使用：

// 插件内导入格式，将<PluginTechnicalName>替换为你的插件技术名称
@import "@<PluginTechnicalName>/scss/variables.scss";
// 主题内导入格式，将<ThemeTechnicalName>替换为你的主题技术名称
@import "@<ThemeTechnicalName>/scss/variables.scss";

.custom-block {
  background-color: $theme-primary-color;
  padding: $base-spacing-unit;
}

3. 全局注册无需重复导入 #

如果需要所有Administration组件都可以直接使用变量，无需逐个导入，可通过扩展webpack配置实现：

1. 在扩展的Administration目录下新建构建配置文件：src/Resources/app/administration/build/webpack.config.js
2. 添加如下配置内容：

module.exports = (config) => {
  // 匹配scss处理规则
  const sassRule = config.module.rules.find(rule => rule.test.toString().includes('scss'));
  sassRule.oneOf.forEach(ruleItem => {
    const sassLoader = ruleItem.use.find(loader => loader.loader.includes('sass-loader'));
    if (sassLoader) {
      // 全局注入变量文件，替换为你自己的变量文件路径
      sassLoader.options.additionalData = `@import "@<Plugin/ThemeTechnicalName>/scss/variables.scss";`;
    }
  });
  return config;
};

3. 重新构建Administration资源生效：

bin/console assets:install
bin/console administration:build

• 不建议直接引用Shopware核心Storefront的变量文件，不同核心版本的变量定义可能存在变动，会导致Administration样式兼容问题，如有需要可将用到的核心变量单独拷贝到自定义变量文件中。
• 修改webpack配置或变量文件内容后，需要重新执行Administration构建命令才会生效，开发模式热重载无法自动识别配置变更。

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