时间戳

首页 > 解决方案 > 如何将 .env 变量传递给 .scss 文件

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

问题描述

如果有办法将 var 从 .env 文件（我使用自定义 webpack、reactJS、dotenv 和 sass-loader）发送到 .scss 文件，我很感兴趣。我想要做的是将路径（字符串）发送到我的 scss 以更改字体 url。

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

提前Tnx。干杯!

标签： reactjswebpacksassenvironment-variables

解决方案

您需要使用additionalDatasass-loader 选项中的属性

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

推荐阅读