Symfony 6 & Webpack Encore：如何在SCSS文件中使用.env变量？

步骤1：在.env文件中定义全局变量 #

先在.env（或.env.local，优先加载本地配置）里设置需要共享的变量，比如：

APP_PRIMARY_COLOR="#2563eb"
APP_SECONDARY_COLOR="#f59e0b"

步骤2：修改webpack.config.js配置 #

打开项目根目录的webpack.config.js，在Encore的配置链中添加以下内容：

给JS文件注入变量

使用configureDefinePlugin将.env变量注入到JS全局作用域，JS文件可直接调用：

Encore
  // ...保留你现有的其他配置（如.setOutputPath、.setPublicPath等）

  // 注入变量到JS
  .configureDefinePlugin(options => {
    options.APP_PRIMARY_COLOR = JSON.stringify(process.env.APP_PRIMARY_COLOR);
    options.APP_SECONDARY_COLOR = JSON.stringify(process.env.APP_SECONDARY_COLOR);
  })

给SCSS文件注入变量

在enableSassLoader中配置additionalData，将.env变量转为SCSS全局变量。注意要去掉变量值的引号，避免SCSS解析错误：

Encore
  // ...其他配置

  // 配置SassLoader传递全局变量
  .enableSassLoader(options => {
    options.additionalData = `
$primary-color: ${process.env.APP_PRIMARY_COLOR.replace(/"/g, '')};
$secondary-color: ${process.env.APP_SECONDARY_COLOR.replace(/"/g, '')};
`;
  })

验证使用 #

• JS文件中：直接调用变量即可

// 示例：在JS中使用变量
console.log('主色调:', APP_PRIMARY_COLOR);
document.body.style.backgroundColor = APP_PRIMARY_COLOR;

• SCSS文件中：直接使用SCSS变量

// 示例：在SCSS中使用变量
.button-primary {
  background-color: $primary-color;
  color: white;
}

.button-secondary {
  background-color: $secondary-color;
  color: white;
}

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