gulp-sass @import CSS 文件

Question

使用 gulp-sass 我可以包含 .scss 文件 @import 'filepath.scss';

但是当我尝试用 @import 'filepath.css' 导入正常的 css 文件时，它只是将 import url(filepath.css); 的导入行添加到输出 css 文件，而不是实际上导入代码。

如何导入 CSS 文件以及 SCSS 文件？我想这样做以包含来自凉亭的文件。

这是我的 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));
});

例如，我想包含相对于上面包含的 bower 目录 datatables/media/css/jquery.dataTables.css 的数据表。

所以在我的 app.scss 文件中我有 @import 'datatables/media/css/jquery.dataTables.css';

如果我不能使用 gulp-sass 来做这个，我还能怎么做？

Answer 1

将一些参数传递给 minifyCSS 可以让我实现这一点。

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

来源：
gulp-minify-css depends on clean-css, referenced options explained here.

Answer 2

通常只需像这样列出 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 文件中定义变量、混合或其他可重用的样式块。

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

最小化需要加载的文件数量（=HTTP 请求数量）将加快页面加载时间
使用 css opitmiser（例如 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 的文件中。当然，要做到这一点，您需要在 gulp 文件中说明 userref 的用法，如下所示：

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 之间的 'magical comments' 引用将这样工作。如果您在保存后使用 browserSync 查看更改，这将有助于最大程度地减少在浏览器中显示更改的延迟。只有 'compiling for production' 你需要使用 'gulp-useref'.

我建议看一下 Slush or Yeoman generators, or rather the code they generate. At least the Yeoman generator 'gulp-webapp' 中似乎使用了 userref 的一些内容。即使您不想使用生成器，它们的输出也可以作为发现最佳实践的好食谱（假设相关生成器制作精良）。

Answer 3

如果您还希望 css 导入在非缩小开发环境中工作，

gulp-cssimport 是一个不错的选择。

Answer 4

我只是将我的 "filename.css" 重命名为 "filename.scss" 并且 @import "filename"; 没有文件扩展名。

Answer 5

我知道这个问题已经有一个公认的答案，但是对于可能遇到这个问题的任何人，我建议使用 gulp-importer。这个插件是高度可配置的，并且应用导入，不仅适用于 CSS 文件，而且适用于任何类型的文件。

除其他选项外，该插件还允许自定义用于放置导入语句的正则表达式模式。所以，不用担心语法会被破坏。

试试吧！ :)

gulp-sass @import CSS 文件

gulp-sass @import CSS file

javascript

css

gulp

gulp-sass