构建项目时重写 sass url答案

【问题标题】：Rewriting sass url when building project构建项目时重写 sass url
【发布时间】：2017-02-05 08:11:52
【问题描述】：

我在开发过程中使用 webpack-dev-server，并有一个公共文件夹作为内容库，其中包含：index.html、img/**.*.jpg。

在我的 sass 文件开发过程中，我将图像引用为：

background-image: url('img/background.jpg');

这在开发过程中可以正常工作，因为 webpack-dev-server 正在为公共文件夹中的图像提供服务。

但是当我构建项目并生成一个稍后将部署到测试服务器的 dist 文件夹时，我需要重写 sass 文件中的所有 url，因为它们不会从根目录提供网络服务器。就我而言，我想将之前的 css 规则重写为：

background-image: url('folder1/folder2/folder3/img/background.jpg');

这可能吗？

【问题讨论】：

标签： javascript css url-rewriting sass webpack

【解决方案1】：

不完全是。我建议您将路径保留为相对于您当前所在的文件夹。例如，有一个 assets 文件夹，其中包含 img、sass 等。然后，您的路径可能相对于 @ 987654324@ root 而不是需要遍历到单独的构建文件夹。这样一来，您是否在 build、dist 或其他位置都无关紧要。

例如：

|assets
|-sass
|--my_styles.scss
|--SUBSTYLES
|---my_substyles.scss
|-img
|--my_img.png

然后您的路径将是：

url(../img/my_img.png) //For my_styles.scss

和

url(../../img/my_img.png) //For my_substyles.scss

否则，您需要为每个服务器/构建类型保留一个单独的变量文件，该文件定义一个 ROOT_PATH 变量并将其附加到您的 SASS 中。类似于

url($ROOT_PATH + 'img/my_img.png')

它总是可以被包装在一个 mixin 中以便更容易使用。

【讨论】：

你建议的结构对我来说不是一个选项，因为我使用的是 Angular2，其中每个 sass 文件都与其所属的相应组件处于同一级别。然后我还使用 webpack 将所有内容编译成单个 bundle.js。
第二个选项应该可以，它只是一个 PITA。但是，我不熟悉 Angular2 的限制。希望您能得到适合您的回复。

【解决方案2】：

我使用 sass-loader 通过环境变量解决了这个问题。

module.exports = {
  ...
  sassLoader: {
    data: "$env: " + process.env.NODE_ENV + ";"
  }
};

【讨论】：