Webpack Encore 1.7.x中Sass变量导入JavaScript问题求助

问题原因 #

Webpack Encore 1.x版本默认调整了css-loader的配置逻辑：全局样式默认不启用CSS Modules，而你需要通过:export导出变量的文件必须启用该模式。直接设置config.modules = true会让所有样式文件进入模块化模式，原有全局样式的类名会被哈希化，无法匹配HTML中的类名，最终导致样式失效。

解决方案 #

方案一：使用命名约定（推荐） #

Encore默认支持通过文件后缀区分模块化样式和全局样式：将需要导出变量的Sass文件重命名为带.module.scss后缀的格式，比如把variables.scss改为variables.module.scss。

修改JS中的导入路径：

import styles from './styles/config/variables.module.scss';

export default () => {
  console.log(styles.iframeBackgroundColor);
}

无需修改Webpack配置，Encore会自动对.module.scss后缀的文件启用CSS Modules，同时保持其他普通.scss文件的全局样式逻辑，既解决导出警告，又不会影响现有样式。

方案二：手动配置css-loader规则 #

如果你不想修改文件名，可以通过configureCssLoader精确指定哪些文件启用CSS Modules：

在webpack.config.js中添加以下配置：

Encore
  // ... 其他现有配置
  .configureCssLoader((config) => {
    config.modules = {
      // 仅匹配你的变量文件（根据实际路径调整正则）
      auto: /assets\/styles\/config\/variables\.scss$/i,
      // 保持类名不变，避免全局样式被哈希化
      localIdentName: '[local]',
    };
  })

这样只有指定的variables.scss文件会启用CSS Modules以支持:export导出，其他样式文件仍按全局模式处理，样式不会失效。

验证 #

修改完成后运行yarn dev，编译警告会消失，打开浏览器控制台可以看到正确输出的Sass变量值，同时现有页面样式能正常显示。

内容的提问来源于stack exchange，提问作者Julien B.