sass 将导入转换为导入 url答案

【问题标题】：sass converting import to import urlsass 将导入转换为导入 url
【发布时间】：2017-03-16 06:17:49
【问题描述】：

新来的粗鲁和咕哝。我所有与供应商相关的 css 文件都在 _vendor.scss 中。

@import "public/css/bower_components/bootstrap/dist/css/bootstrap.css";

这转换为 main.css

@import url(public/css/bower_components/bootstrap/dist/css/bootstrap.css);

我希望它是

@import "public/css/bower_components/bootstrap/dist/css/bootstrap.css";

而不是 url 怎么做。因为接下来我想使用 cssjoin 将所有导入 css 连接到一个文件中，并使用 grunt 连接 cssmin。

文件夹结构

public ---> scss --->vendor-> _vendor.scss
public ---> css ---> bower_components --> ......
public ----> css ---> main.css

繁重的任务

    sass: {
        dist: {
            files: {
                'public/css/main.css': 'public/scss/main.scss'
            }
        }
    },

    autoprefixer: {
        dist: {
            options: {
                map: true
            },
            files: {
                'public/css/main.css': 'public/css/main.css'
            }
        }
    },

    watch: {
        css: {
            files: '**/*.scss',
            tasks: ['sass', 'autoprefixer']
        }
    },

【问题讨论】：

您可能需要向我们展示更多代码和您的文件结构。似乎它没有在该地址找到 css 文件，所以它假设它是一个 URL。
你能告诉我们你的 grunt 任务是什么样的吗？
@DominicAquilina 添加了代码 n 文件夹结构。
@KodieGrantham 添加了代码 n 文件夹结构。
是的，您的相对路径似乎是错误的。要从 _vendor.scss 文件进入 bower_components 文件夹，您需要“../”向上几级。

标签： css sass gruntjs

【解决方案1】：

那是因为apparently SASS treats CSS imports differently from SCSS imports。如果你 @import 'some/file.css'，它将被编译为 @import url(some/file.css)，因为 SASS 想要保持你原来的 CSS 导入完整（同时以标准方式改变它具有讽刺意味）。

但是，如果您将 CSS 文件的扩展名更改为 .scss 并将它们原样导入到您的主文件中，SASS 编译器将完成它的工作并包含它们的内容以代替原始导入规则。它之所以有效，是因为常规 CSS 语法也是有效的 SCSS 语法，它会欺骗编译器将您的导入规则视为 SCSS 导入。

此外，似乎没有相当简单的方法来改变这种行为，而且显然它不会很快改变based on this ticket open since 2012 that's slowly filling up with workarounds for this exact problem。

希望这会有所帮助！

【讨论】：

谢谢，这解决了让我头疼了好几个小时的错误。在熟悉 LESS 后，我一直在尝试尝试 SASS，但我想我会坚持使用 LESS。