sass将import转换为import url

Question

新的对话和抱怨。我所有与供应商相关的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']
        }
    },

Answer 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。

希望这能有所帮助！