使用 webpack 基于环境变量的 SASS 条件导入（每个环境使用不同的主题）

对于我的 Vue 网站项目，使用使用 SASS 的 Webpack 生成的单个样式表，我想要：

基于环境变量的条件 SASS 导入

设置示例：

.env：例如，如果我有一个包含以下内容的环境：

SASS_THEME="soft"

soft.scss：一个 SASS 主题文件，包含以下内容：

$color-alpha: #e5e5e5;

main.scss：一个主 sass 文件看起来像这样：

// Import theme variables here
@import '${SASS_THEME}';

body{
    background: $color-alpha;
}

您可以使用 webpack 别名。它应该是带有主题的文件的路径。

const env = require('./.env');
...
const theme = getThemeFromEnv(env); // you need to implement this method
...
resolve: {
 alias: {
  @SASS_THEME: theme
 }
}

然后在 scss 文件中使用它：

// Import theme variables here
@import '@SASS_THEME';

body{
    background: $color-alpha;
}

UPD 使用 raw-loader 加载 .env 文件：

rules: [
      {
        test: /\.env$/,
        use: 'raw-loader',
      },
],

它将加载任何内容作为原始字符串

UPD2
我已经知道如何加载了.env with dotenv package

const dotenv = require('dotenv').config({path: __dirname + '/.env'});

console.log(dotenv.parsed) // output { SASS_THEME: 'soft' }