Question

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

的.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));
});

例如，我想要包含相对于上面包含的凉亭目录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

如果您还希望css导入在非简化的开发环境中工作，那么

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

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文件中定义变量，mixins或其他可重用的样式块。

但是，许多人希望将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的文件。当然，要实现这一点，您需要在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“文件名”；没有文件扩展名。

gulp-sass @import CSS文件

4 个答案: