Gulp -sass @import CSS file

Question

Using gulp -sass, I can include .scss files with @import 'filepath.scss';

But when I try to import normal css files using @import 'filepath.css' , it just added import line import url(filepath.css); into the css output file, rather than actually importing the code.

How to import CSS files as well as SCSS files? I want to do this to include a file form.

Here is my gulp function:

 // 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)); }); 

For example, I want to include data located in datatables/media/css/jquery.dataTables.css relative to the bower directory, as described above.

So, in my app.scss file, I have @import 'datatables/media/css/jquery.dataTables.css';

If I cannot use gulp-sass for this, how else can I do this?

Answer 1

Passing some parameters to minifyCSS allows me to achieve this.

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

Sources:
gulp-minify-css depends on clean-css , the links are listed here .

Answer 2

gulp-cssimport is a good choice if you also want css imports to work in non-minified development environments.

Answer 3

Quite often, this is solved simply by listing all the files in the HTML file as follows:

 <!-- '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"/> 

I believe that this will have the disadvantage that you cannot refer to classes defined in the provider’s CSS files from SCSS files, for example with the @extend directive (I didn’t have to do this), Besides that, I don’t I think there is some functional reason why it is impossible to do so, since it is impossible to define variables, mixins, or other reusable style blocks in css files.

However, many people want to combine CSS files into one css file for two reasons:

• Minimizing the number of files needed to download (= the number of HTTP requests) will speed up page loading time
• Using css opitmiser (e.g. csso ) can find overlaps from a single monolithic CSS file, and it can be more efficient.

To achieve this, gulp-useref is often used. To do this, HTML should have special comments containing links to style sheets:

 <!-- 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 --> 

The magic comments above instruct useref to combine the CSS files referenced by the comments into a file called styles/combined.css . Of course, for this you will need to specify the use of useref in your gulpfile, something like this:

 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')); }); 

Note that you must first compile the SCSS files for this.

One of the reasons for this is that the processing time required to get a viewable HTML page with working CSS during development is minimized. That is, after you make changes to your SCSS files, the only thing gulp needs to do to be able to display the changes is to compile the SCSS files, since CSS links between the "magic comments" will work as such. If you use browserSync to view the changes after saving, this will help minimize the delay for the changes displayed in your browser (s). Only "compile for production" you need to use "gulp -useref".

I recommend taking a look at some of Slush or Yeoman , or rather, the code that they generate. At least the Yeoman ' gulp-webapp ' generator seems to be using useref. Even if you do not want to use generators, their output serves as a good recipe book for discovering best practices (provided that the generator in question is well done).