gulp-sass @import CSS 文件

Question

使用gulp-sass插件，我可以使用@import 'filepath.scss';引入scss文件。

但是，当我尝试使用@import 'filepath.css';引入普通的CSS文件时，它只是在输出CSS文件中添加了导入行import url(filepath.css);，而没有实际导入代码。

我该如何导入CSS文件和SCSS文件？我希望这样做可以包含来自Bower的文件。

下面是我的gulp函数：

// include gulp
var gulp = require('gulp');

// include deps
var minifyCSS  = require('gulp-minify-css'),
    autoprefix = require('gulp-autoprefixer'),
    rename     = require('gulp-rename'),
    sass       = require('gulp-sass');

var targets = {
    css: './output/css'
};

// compile CSS
gulp.task('sass', function() {

    gulp.src([
        './app/assets/scss/app.scss', 
        './app/assets/scss/app-admin.scss'
    ])
    .pipe(sass({
        includePaths: [
            './bower_components/bootstrap-sass-official/vendor/assets/stylesheets', 
            './bower_components'
        ],
        errLogToConsole: true
    }))

    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest(targets.css))
    .pipe(minifyCSS())
    .pipe(rename(function (path) { path.basename += '.min'; }))
    .pipe(gulp.dest(targets.css));
});

例如，我想包含datatables库，该库位于相对于bower目录的datatables/media/css/jquery.dataTables.css位置。

因此，在我的app.scss文件中，我使用@import 'datatables/media/css/jquery.dataTables.css';导入。

如果无法使用gulp-sass来完成此操作，我还有其他方法吗？

- Nicekiwi

Answer 1

将一些参数传递给minifyCSS函数可以帮助我实现这个目标。

.pipe(minifyCSS({
        relativeTo: './bower_components',
        processImport: true
    }))

资料来源：
gulp-minify-css 依赖于 clean-css，相关选项可以在此找到详细解释：这里。

- Nicekiwi

---

gulp-minify-css 包现已被弃用。这对我来说是个大问题，因为建议的替代品（gulp-cssnano）不包括类似的功能。最终我使用了 PostCSS，并使用该包运行 autoprefixer 和 postcss-import，然后在这两个任务完成后运行 gulp-cssnano。结果相同，而且你不会使用一个已经被弃用的包。@Ezra FYI - evanhuntley

@evanhuntley gulp-clean-css支持processImport，但现在我认为该选项只称为“inline”，并默认为“inline：['local']”，因此将自动导入CSS代码。 - phazei

Answer 2

gulp-cssimport 是一个不错的选择，如果你想让 css 导入在非压缩的开发环境中也能正常工作。

- Alp

Answer 3

我只是将我的“filename.css”重命名为“filename.scss”，然后使用没有文件扩展名的@import“filename”引入它。

- Vardmev

Answer 4

通常情况下，这可以通过在HTML文件中列出所有文件来解决：

<!-- 'vendor' styles -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<!-- refernce to the SCSS compilation output -->
<link rel="stylesheet" href="styles/main.css"/>

我想这样做的缺点是无法在 SCSS 文件中引用“vendor”CSS 文件中定义的类，例如使用 @extend 指令（我没有这样做的需要）。除此之外，我认为没有任何功能上的原因不能以这种方式完成，因为不可能在 CSS 文件中定义变量、mixin 或其他可重用的样式块。

然而，许多人希望将 CSS 文件合并成一个文件，因为有两个原因：

1. 最小化所需加载的文件数量（即 HTTP 请求的数量）将加快页面加载时间
2. 使用 CSS 优化器（如 csso）可以从单个庞大的 CSS 文件中找到重叠部分，从而使优化更加高效。

为了实现这一点，通常会使用 gulp-useref。为此，HTML 需要在样式表引用周围添加特殊注释：

<!-- build:css styles/combined.css -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->

上面的魔法注释指示useref将在注释之间引用的CSS文件连接到名为styles/combined.css的文件中。当然，要实现这一点，您需要在gulpfile中指示使用useref，类似于以下内容：

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    csso = require('gulp-csso');

gulp.task('html', function () {
    var assets = useref.assets();

    return gulp.src('app/*.html')
        .pipe(assets)
        .pipe(gulpif('*.css', csso()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

请注意，需要先编译SCSS文件才能使其正常工作。

采用这种方法的原因之一是在开发过程中，获取可视HTML页面和工作CSS所需的处理时间被最小化。也就是说，在您修改SCSS文件后，为了显示更改，gulp需要做的唯一一件事情就是编译SCSS文件，因为“神奇的注释”之间的CSS引用将会按照此方式工作。如果您使用 browserSync 在保存后查看更改，这将有助于将更改在浏览器中显示的滞后时间最小化。只有在“为生产而编译”时，您需要使用“gulp-useref”。

我建议看一下一些Slush或Yeoman生成器，或者它们所生成的代码。至少Yeoman生成器'gulp-webapp'似乎使用了useref。即使您不想使用生成器，它们的输出也可以作为发现最佳实践的好食谱（假设相关的生成器制作得很好）。

- Kalle Björklid

Answer 5

我知道这个问题已经有了一个被接受的答案，但是对于任何可能遇到这个问题的人，我建议使用gulp-importer。这个插件非常可配置，并且可以应用导入，不仅适用于CSS文件，还适用于任何类型的文件。

除了其他选项之外，该插件允许自定义在放置导入语句时使用的正则表达式模式。因此，不必担心语法可能会出错。

试试吧！ :)

- Salih Kavaf