gulp-sass @导入CSS文件

yyyllmsg  于 2022-12-08  发布在  Gulp
关注(0)|答案(5)|浏览(217)

使用gulp-sass,我可以将.scss文件包含在@import 'filepath.scss';
但是当我尝试用@import 'filepath.css'导入普通的css文件时,它只是将import url(filepath.css);的导入行添加到输出的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));
});

例如,我想包括相对于上述bower目录位于datatables/media/css/jquery.dataTables.css的数据表。
所以在我的app.scss文件中有@import 'datatables/media/css/jquery.dataTables.css';
如果我不能用吞咽口水来做这件事,我还能怎么做呢?

z18hc3ub

z18hc3ub1#

通过向minifyCSS传递一些参数,我可以实现这一点。

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

来源:

gulp-minify-css取决于clean-css,此处说明了引用选项

pdkcd3nj

pdkcd3nj2#

如果您还希望css导入在非小型开发环境中工作,gulp-cssimport是一个很好的选择。

a11xaf1n

a11xaf1n3#

通常,只需在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请求数量)将加快页面加载时间
1.使用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文件,如果你在保存后使用browserSync来查看修改,这将有助于最小化在浏览器中显示更改的延迟。只有“为生产而编译”才需要使用“gulp-useref”。
我建议你看一下SlushYeoman生成器,或者说它们生成的代码。至少Yeoman生成器'gulp-webapp'似乎使用了useref。即使你不想使用这些生成器,它们的输出也可以作为一本很好的食谱来发现最佳实践(假设所讨论的生成器制作得很好)。

syqv5f0l

syqv5f0l4#

我只是将我的“文件名. css”重命名为“文件名.scss”和@导入“文件名”;没有文件扩展名。

rjzwgtxy

rjzwgtxy5#

我知道这个问题已经有了一个公认的答案,但是,对于任何可能遇到这个问题的人,我建议使用gulp-importer。这个插件是高度可配置的,并适用于导入,不仅是CSS文件,但任何类型的文件。
除了其他选项外,插件还允许自定义用于放置导入语句的正则表达式模式。因此,不必担心语法可能会出错。
给予看吧!:)

相关问题