构建项目时重写sass url

我在开发过程中使用webpack-dev-server并将公用文件夹作为内容库包含：index.html，img /**.*。jpg。构建项目时重写sass url

在我的青菜文件发展我参考图像为：

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

这因为的WebPack-DEV-服务器在公用文件夹服务图像发育过程中正常工作。

但是当我构建项目并生成一个稍后将被部署到测试服务器的dist文件夹时，我需要重写sass文件中的所有URL，因为它们不会从根目录网络服务器。在我的情况下，我想重写以前的CSS规则为：

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

这可能吗？

2016-12-29 hazmah0

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

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

2017-02-05 00:11:52 hazmah0

不完全。我会推荐你，而不是保持你的路径相对于你当前所在的文件夹。例如，有一个assets文件夹，它既有img,sass等等。然后，你的路径可能是相对于assets根，而不是需要遍历到一个单独的生成文件夹。这样，如果你在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')

它总是可以包裹在一个混合使用更容易。

2016-12-29 18:30:57

你认为，结构是不是因为我使用Angular2，每一个青菜文件是在同一水平，因为它属于相应的组件我的选择。然后我也使用webpack将所有东西编译成一个bundle.js。 – hazmah0

第二个选项应该可以工作，它只是一个PITA。但是，我不熟悉Angular2的限制。希望你会得到一个适合你的回应。 –

回答