logo标签列表

使用Gulp重新定位CSS中的URL

csssassnpmgulp
3
我有一个关于如何解决以下情况的问题：
在我的sass文件中，我在主要包含文件中使用绝对路径变量，例如字体位于/assets/fonts/...，图标位于/assets/icons/...等。现在这些路径仅在域名为根目录时才有效。
我希望我的应用程序运行的环境具有不同的文件夹结构，需要深入几个级别。
以下是开发环境文件结构的示例：
/root
    assets
        icons
        ...
    home
        home.scss
    page1
        module
            module.scss

以下是新环境中的文件结构示例：
/root
    various
        subfolders
            assets
                icons
                ...
            css
                home
                    home.css
                page1
                    module
                        module.css

如下可以看到: 编译的CSS文件会被创建在子文件夹中，并且可能会很深，例如8层深。由于新的树状结构，我的CSS根声明不再起作用。

我的选择如下:

  • 调整我的SASS，使所有路径都是相对的（我不想这样做，这将使我的SASS更加复杂，现在一切似乎都很好）
  • 调整我的.htaccess文件，以便涵盖此内容（我也不喜欢这样做，每次切换环境都要进行调整，似乎是“hacky”）
  • 创建/使用一个gulp任务，修复我的编译CSS文件，以便将相对路径添加到所有找到的url("/assets

我已经搜索了很多，查看了thread2、gulp-tap和gulp-replace。但是我总觉得做得不够好。例如：显然的解决方案gulp-replace无法按照我需要的方式工作，因为我需要获取当前在管道中的文件的信息（获取其file.path，从而找出该文件向上爬升到达assets文件夹经过了多少层故事）。

有人做过这个吗？或者有想法如何解决这个问题吗？

1个回答
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接