Gulp-wepb-css won't let me import css file from node_modules. How to decide?

Question

JavaScript

I want to connect the normalize.css file via import to a common scss file via import

However, the gulp-webp-css plugin gives an error.
In gulpfile, this function manages this business:


I would be glad for any feedback!

Answer 1

Try gulp-sass which will compile scss files into one css file.
And the normalize.css extension must first be changed to normalize.scss.

Answer 2

I have the same situation and I suffered all day.
And the solution is very simple! Drop the gulp-webp-css pipe ( .pipe(webpcss()) ) below the cleaner ( .pipe(clean_css()) ) and you'll end up with something like this:

function css() {
  return src(path.src.css)
    .pipe(
      scss({
        outputStyle: "expanded"
      })
    )
    .pipe(group_media())
    .pipe(
      autoprefixer({
        overrideBrowserslist: ["last 15 versions"],
        cascade: true
      })
    )
    // .pipe(webpcss())
    .pipe(dest(path.build.css))
    .pipe(clean_css())
    .pipe(webpcss())
    .pipe(rename({
      extname: ".min.css"
    }))
    .pipe(dest(path.build.css))
    .pipe(browsersync.stream())
}

Thank you for your attention!
PS: you can apply the minifier again after .pipe(webpcss()) before rename)