如何将 .env 变量传递给 .scss 文件

Question

我有一个问题，想知道是否有方法可以从 .env 文件发送变量（使用自定义的 webpack、ReactJS、dotenv 和 sass-loader），并将其发送到 .scss 文件中。我要做的是将路径（字符串）发送到我的 scss 中，以更改字体 URL。

在我的本地主机上，URL 是 /fonts/font.ttf，但是我的应用程序部署到服务器的子文件夹中，因此应该是类似于 /shop/fonts/font.ttf。

先感谢您的帮助！

- Marko Arthofer

---

看一下这个 https://dev59.com/i1MI5IYBdhLWcg3wFXWg 或者这个 https://github.com/sass/node-sass/issues/1778 - Piotr

非常感谢。 :D - Marko Arthofer

Answer 1

你需要使用sass-loader选项中的additionalData属性。

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: '$env: ' + process.env.NODE_ENV + ';',
            },
          },
        ],
      },
    ],
  },
};

更多信息和另一种方法在这里：https://webpack.js.org/loaders/sass-loader/#additionaldata

- Danila

---

我已经做到了，但将其作为字符串包含在我的样式中是一个问题。干杯 - Marko Arthofer