Sass将import转换为import url

Question

我刚接触sass和grunt。所有与供应商相关的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);

i want it to be

@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 

Grunt任务

    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']
        }
    },

- user1837779

---

你可能需要向我们展示更多的代码和文件结构。看起来它在那个地址找不到css文件，所以它认为它是一个URL。 - Kodie Grantham

@DominicAquilina 在文件夹结构中添加了代码。 - user1837779

@KodieGrantham 添加了代码和文件夹结构。 - user1837779

是的，你的相对路径似乎有误。从你的_vendor.scss文件进入bower_components文件夹，你需要向上几个级别 '../'。 - ppajer

@ppajer尝试添加../向上，但结果相同。 - user1837779

Answer 1

那是因为显然SASS对CSS导入和SCSS导入的处理方式不同。如果你使用@import 'some/file.css'，它将被编译为@import url(some/file.css)，因为SASS希望保留你原始的CSS导入（虽然具有讽刺意味的是以标准的方式进行更改）。

但是，如果你将CSS文件的扩展名更改为.scss并在主文件中以此方式导入它们，则SASS编译器将执行其操作，并包含其内容以替换原始导入规则。这简单地起作用，因为常规CSS语法也是有效的SCSS语法，它会欺骗编译器将你的导入规则视为SCSS导入。

此外，似乎没有合理简单的方法来更改此行为，而且根据自2012年以来一直存在的工单，该问题的解决方法正在慢慢填充，这种情况似乎不会很快改变。

希望这可以帮到你！

- ppajer

---

谢谢，这解决了我几个小时的错误。在熟悉LESS之后，我一直试图尝试使用SASS，但我想我还是会坚持使用LESS。 - Turner Hayes