Javascript gulp sass@import CSS文件

使用gulp sass，我可以使用

@import'filepath.scss'包含.scss文件

但是当我尝试用
@import'filepath.css'
导入普通css文件时，它只是添加了
导入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));
});

例如，我想包含datatables，它位于
datatables/media/css/jquery.datatables.css
，与上面包含的bower目录相关

因此，在我的
app.scss
文件中，我有
@import'datatables/media/css/jquery.datatables.css'

如果我不能使用gulp sass来完成这项工作，那么我还能怎么做呢？
将一些参数传递给minifyCSS可以让我实现这一点

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

来源：

取决于，参考选项解释。
通常只需列出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"/>

上面的神奇注释指示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引用将同样起作用。如果您使用在保存后查看更改，这将有助于将更改显示在浏览器中的延迟降至最低。仅“为生产而编译”您需要使用“gulp useref”

我建议看一看一些or生成器，或者更确切地说是它们生成的代码。至少Yeoman生成器“”似乎使用了useref。即使您不想使用生成器，它们的输出也可以作为发现最佳实践的一本很好的食谱（假设所讨论的生成器制作得很好）。
如果您还希望css导入在非小型开发环境中工作，这是一个很好的选择。
我只是将我的“filename.css”重命名为“filename.scss”，然后
@导入“文件名”；
没有文件扩展名。
该软件包现在已被弃用。这对我来说是个大问题，因为建议的替换（gulp cssnano）不包括类似的功能。我最后做的是使用POSTSS并使用该软件包运行autoprefixer和POSTSS导入，然后在完成这两个之后运行gulp cssnano。结果是相同的，并且您没有使用不推荐使用的包@以斯拉FYI@evanhuntleygulp clean css支持processImport，但现在我认为该选项被称为“inline”，默认为“inline:['local']”，因此将自动导入css代码
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'));
});