Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Import CSS from node_modules using Gulp-SASS

Tags:

npm

sass

gulp

I want to import a CSS-file from my node_modules using SASS.

@import 'normalize.css/normalize';

This is how my gulpfile.js handles my SASS:

const
  gulp = require('gulp'),
  sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass'])
    .pipe(sass())
    .pipe(gulp.dest('output/assets/css'));
});

SASS compiler will not import the css from node_modules. Instead, this will throw an error.

Error: File to import not found or unreadable: normalize.css/normalize.
like image 204
confusius Avatar asked Jun 14 '17 18:06

confusius


2 Answers

SASS compiler doesn't know where to look for the files. The location needs to be specified.

gulp.task('sass', function () {
  return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass'])
    .pipe(sass({
      includePaths: ['node_modules']
    }))
    .pipe(gulp.dest('output/assets/css'));
});
like image 168
confusius Avatar answered Sep 19 '22 14:09

confusius


What works for me, in 2020, is this:

function styles() {
    return (
      gulp.src(paths.styles.src)
        .pipe(sourcemaps.init())
        .pipe(sass({
                    includePaths: ['./node_modules/purecss-sass/vendor/assets/stylesheets/',
                                  './node_modules/modularscale-sass/stylesheets/',
                                  './node_modules/typi/scss/'
                                  ]
                  }))
        .on("error", sass.logError)
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(browserSync.stream())
    );
}

Now in the scss files, I can

@import 'modularscale';
@import 'typi';
@import 'purecss';

The other options seem to be:

  1. put the full paths to the main _somelibrary.scss file directly in the scss files (minus the extension), so something like:
@import '../../node_modules/purecss-sass/vendor/assets/stylesheets/_purecss';
  1. Put includePaths: ['./node_modules'] and add the relative paths in the scss files:
@import 'purecss-sass/vendor/assets/stylesheets/_purecss';
like image 29
MikeiLL Avatar answered Sep 19 '22 14:09

MikeiLL