D
D
Dmitry2017-05-08 15:07:17
JavaScript
Dmitry, 2017-05-08 15:07:17

What is the correct way to build a CSS file in Gulp, including files installed via NPM?

Hello.
I started learning Gulp to make it more convenient to work with layout and ran into a banal problem. For example, I install the normalize.css plugin via NPM. The corresponding directory appears in the /node_modules folder, there is a normalize.css file.
How to attach it to your project? Copying to the project folder or writing an absolute path seems inconvenient and, most likely, this is wrong.
The same applies to all CSS frameworks that are installed via NPM and that need to be attached to the project.
I found information about includePaths on the toaster: with an example, I tried to use it in a Gulp task:

gulp.task('sass', function() {
  return gulp.src('app/sass/*.scss')
  .pipe(sass( {
    includePaths: require('normalize.css')
  }))
  .pipe(gulp.dest('app/css'))
});

And I inserted a line for import into the edited .SCSS: But the console gives an error:
@import 'normalize.css';
C:\Users\USER\Desktop\_project\node_modules\normalize.css\normalize.css:12
html {
     ^
SyntaxError: Unexpected token {

How to "pull" CSS files from installed packages and compile them into one file, along with your project styles?
This applies to normalize as well as any CSS framework, for example if you need to include Bootstrap.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dmitry, 2017-05-10
@Sky-R

Understood. On the normalize.css part, there was an error on the line with IncludePaths, the correct one is here .
Regarding the part of the question on connecting frameworks - Bower decides everything, through it you can install different libraries. Information is in the lesson " Gulp for the little ones ", Bower is explained from ~53 minutes.

M
monochromer, 2017-05-08
@monochromer

gulp.task('sass', function() {
  return gulp.src('app/sass/*.scss')
  .pipe(sass({
    includePaths: ['./node_modules']
  }))
  .pipe(gulp.dest('app/css'))
});

@import 'normalize.css/normalize.css';

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question