gulp-sass @import CSS文件

Question

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

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

如何导入CSS文件和SCSS文件？我想这样做是为了包括文件形式的凉亭。

这是我的口水功能：

// 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取决于clean-css，here解释了引用的选项。

Answer 2

[gulp-cssimport是一个不错的选择，如果您还希望css导入在非最小化的开发环境中工作。

Answer 3

通常通过简单地列出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文件引用“供应商” CSS文件中定义的类的缺点，例如，使用@extend指令（我不需要这样做）。除此之外，我认为没有任何功能上的原因无法做到这一点，因为无法在css文件中定义变量，mixin或其他可重复使用的样式块。

但是，由于两个原因，许多人希望将CSS文件合并为一个css文件：

1. 最小化加载所需的文件数量（= HTTP请求的数量将加快页面加载时间）>>
2. 使用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的文件。当然，要做到这一点，您需要在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文件。

这样做的原因之一是，在开发时，使用可工作的CSS来获得可查看的HTML页面所需的处理时间被最小化。也就是说，在修改了SCSS文件之后，gulp能够显示更改的唯一要做的就是编译SCSS文件，因为“魔术注释”之间的CSS引用将可以正常工作。 。如果在保存后使用browserSync查看更改，这将有助于最大程度地减少更改在浏览器中显示的延迟。仅需要“为生产而编译”，才需要使用“ gulp-useref”。

我建议看一些Slush或Yeoman生成器，或者更确切地说，它们生成的代码。至少Yeoman生成器'gulp-webapp'似乎使用useref。即使您不想使用生成器，它们的输出也可以作为一本很好的食谱书，用于发现最佳实践（假设所讨论的生成器做得很好）。

Answer 4

我只是将我的“ filename.css”重命名为“ filename.scss”，@import“文件名”；没有文件扩展名。