Laravel Mix环境下scss与JS文件无法共享变量怎么解决？

• Laravel Mix 6.x 默认仅对后缀为 .module.scss/.module.sass 的文件启用 CSS 模块解析逻辑，普通 .scss 文件中的 :export 块会被当作普通 CSS 规则处理，编译后不会暴露给 JavaScript 导入，因此你拿到的是空对象。
• 你当前使用的 sass-loader@12.x 版本默认关闭了非模块化样式文件的导出暴露能力，和 Laravel Mix 的默认规则叠加后，进一步阻断了普通 scss 文件向 JS 传递变量的路径。

1. 最简便的修改方式是重命名你的变量文件：将 variables.scss 改为 variables.module.scss，同步修改 JS 中的导入语句为 import variables from './variables.module.scss'，重新编译后即可正常拿到 {color: '#ffffff'} 的导出对象。
2. 如果你不想修改文件名，也可以在项目根目录的 webpack.mix.js 中添加自定义配置，手动开启普通 scss 文件的导出能力：

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: {
                compileType: 'icss'
              }
            }
          }
        ]
      }
    ]
  }
})

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