Normalize.css: SCSS support: Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.

[ghost]

Importing this package in npm isn't as viable as it used to be since including .css files with @import became a non-standard behavioud in LibSass..

[mvasilkov]

@coldtelling use systematize then 😈

It's basically normalize.css 8.0 translated to SCSS, and with some very localized additions, such as the system font-stack.

[necolas]

I'm not going to rename the npm package. Sounds like a problem with libsass that can be addressed somewhere in the tool chain

[robneu]

Dart Sass is also not allowing this behavior. It's possible to address this during a build, but it would be nice if a .scss version was also available. Because forks of this library never seem to last more than a couple of months, would you please reconsider adding this?

[colourgarden]

As announced on the Sass repo on 16th June, importing of .css files will be officially supported by Sass in future.

My understanding of the announcement and proposal is that @import 'normalize.css/normalize' (note; no file extension) should print the contents of normalize.css into your final compiled CSS file rather than introducing a CSS @import.

[cocowalla]

@robneu Dart Sass does now support importing CSS files

[jimmyadaro]

Right now I'm using Gulp 4 as bundler, I have a root app.scss file where I include everything I need, so adding normalize.css as an extra source file which will be called using @import is not good enough for me.

What I did is install normalize.css using npm and then, inside my main styles bundling pipeline, just add one previous step before bundling my main SCSS file:

// Bundle styles files
function styles() {
    // Rename NPM's "normalize.css" to "_normalize.scss"
    gulp.src("./node_modules/normalize.css/normalize.css")
      .pipe(rename(function (path) {
          path.basename = "_normalize";
        path.extname = ".scss";
      }))
      .pipe(gulp.dest("./node_modules/normalize.css/"));

    // And then bundle everything
    return gulp
        .src(paths.styles.src)
        // ...
        .pipe(gulp.dest(paths.dest))
        // ...
}

Please note I'm using gulp-sass and gulp-rename packages in this example.

Later on I just use @import in the root sass file, like so:

@import './my-path-to/node_modules/normalize.css/_normalize.scss';

This way normalize.css will be always up-to-date.

Hope this helps someone!