通过webpack将process.env.NODE_ENV变量转换为scss

Question

有没有一种方法可以通过将process.env.NODE_ENV传递给webpack中的sass-loader，在scss文件中引用它？如果有，有人知道如何操作吗？

这是我的webpack模块加载器数组。

module: {
    loaders: [
      { test: /\.js?$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '../app'),
        exclude: /node_modules/
      },
      { test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles')
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include : path.join(__dirname, '../app', 'images'),
        loader  : 'file-loader?limit=30000&name=[name].[ext]'
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        include : path.join(__dirname, '../app', 'fonts'),
        loader: 'file-loader?name=fonts/[name].[ext]'
      }
    ] 

我甚至尝试过

      { test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles'),
        options: {
          data: "$env: " + process.env.NODE_ENV + ";"
        }
      }

但上述操作导致构建失败。我只是想找到一种根据环境访问url的方法，不一定要通过webpack实现，任何想法都可以帮助我，而且不要硬编码。例如：

  .contact-transparent{
    width: 100%;
    height: 100%;
    background: url(process.env.NODE_ENV+'/home-background.jpg') left center no-repeat;
  }

- me-me

Answer 1

我认为你可以通过一个自定义加载器来完成这个任务，将其链接到你的Sass文件之前的其他加载器中。在该加载器中，你可以检查NODE_ENV的值，并在Sass源代码中进行查找/替换，其中替换的值基于环境变量。虽然不太花哨，但可以完成工作。例如：

// url-by-env-loader.js
module.exports = (source) => {
  const urlsByEnv = {
    dev: "the-dev-host.com",
    staging: "the-staging-host.com",
    prod: "the-prod-host.com"
  };
  const urlToReplace = "the-url-in-your-sass-source.com";
  const urlToUse = urlsByEnv[process.env.NODE_ENV];
  const replaceRegex = new RegExp(urlToReplace, 'g');  

  return source.replace(replaceRegex, urlToUse);
}

- Brendan Gannon