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

【问题标题】：SASS conditional imports based on env variables using webpack (to use different themes per environment)使用 webpack 基于 env 变量的 SASS 条件导入（每个环境使用不同的主题）
【发布时间】：2020-03-23 23:34:41
【问题描述】：

对于我的 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 sass environment-variables

【解决方案1】：

你可以使用 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 加载 .env 文件使用 raw-loader:

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

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

UPD2
我知道如何用dotenv 包加载.env

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

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

【讨论】：

谢谢尼克，虽然我仍然没有让事情正常工作。我已经添加了您的解决方案，并进行了一些小改动以使其正常工作（Sass 需要在变量名前添加 ~。如果我现在编写一个返回字符串的函数，它可以工作。但我不能要求 .env 文件我的 webpack 配置，我猜 require 尝试将文件解析为 javascript，导致 webpack 构建出错。如果您有任何其他想法，我将非常感激，因为第一部分确实有效。
@RogiervanderHeijden 是的，我忘了~，谢谢。更新了答案，尝试使用 raw-loader
！nickbullock 再次感谢！虽然我还没有让它继续工作......我认为 raw-loader 的行为类似于我之前尝试过的 dotenv ，它的功能只能在我的应用程序本身中使用，而不是在设置 raw-loader 的 webpack 配置中。
我的男人！我准备放弃了，但你的解决方案很完美！谢谢你帮助我！非常感谢！
@Rogier 很高兴听到这个消息 =)