Question

我有一个关于如何解决以下情况的问题：

在我的sass文件中，我在主要包含文件中使用绝对路径变量，例如字体位于/ assets / fonts / ...中，图标位于/ assets / icons / ...等等。现在，这些路径显然只在域名为root时才有效。

我希望我的应用程序运行的环境有一个不同的文件夹结构，可以深入几层。

以下是我的开发环境中的文件结构示例：

/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，从而找出文件的故事数量）已爬上去到资产文件夹）。

有没有人这样做过？或者也许知道如何解决这个问题？

Answer 1

好吧，自己解决了。我为此创建了一个gulp-plugin： https://www.npmjs.com/package/gulp-css-adjust-url-path

使用gulp来重新定义CSS网址

1 个答案: