基于Webpack的环境变量的SASS条件导入（以在不同环境下使用不同主题）

Question

对于我的Vue网站项目，使用Webpack从SASS生成单个样式表，我希望有以下内容：

基于环境变量的条件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;
}

- Rogier

Answer 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;
}

更新: 要加载 .env 文件，请使用 raw-loader:

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

它将以原始字符串的形式加载任何内容

更新2
我已经知道如何使用dotenv包加载.env文件

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

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

- nickbullock

---

谢谢Nick，虽然我仍然无法使事情正常工作。我已经添加了你的解决方案，并进行了一些小改动以使其工作（Sass需要在变量名前加上~）。如果我现在编写一个返回字符串的函数，它就可以工作了。但是我无法在我的webpack配置中要求.env文件，我猜测require尝试将文件解析为javascript，导致webpack构建出错。如果您有任何其他想法，我将非常感激，因为第一部分确实起作用了。 - Rogier

@RogiervanderHeijden，是的，我忘记了~，谢谢。已更新答案，请尝试使用raw-loader。 - nickbullock

!nickbullock 再次感谢！虽然我还没有让它工作起来...我认为 raw-loader 的作用类似于我之前尝试过的 dotenv，它的功能只能在我的应用程序本身中使用，而不能在设置 raw-loader 的 webpack 配置中使用。 - Rogier

兄弟！我已经准备放弃了，但是你的解决方案完美地解决了我的问题！感谢你的帮助！非常感激！ - Rogier

@Rogier 很高兴听到这个消息 =) - nickbullock