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.
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'));
});
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:
_somelibrary.scss
file directly in the scss files (minus the extension), so something like:@import '../../node_modules/purecss-sass/vendor/assets/stylesheets/_purecss';
includePaths: ['./node_modules']
and add the relative paths in the scss files:@import 'purecss-sass/vendor/assets/stylesheets/_purecss';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With