@import normalize.css в scss

174

24 июля 2019, 01:00

работаю с gulp поставил модуль normalize.css хочу его стили импортировать в scss если импортировать по типу:

@import "../../../../node_modules/normalize.css/normalize";

то стили применяются но в логе есть предупреждение:

Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass. Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.

проблема исчезает если переименовать расширение файла в .scss, но это плохой вариант. Далее, можно указать непосредственно что файл является .css, в таком случае стили не применяются и в браузере есть ошибка о том что файл:

Refused to apply style from because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Answer 1

Лучше установи https://www.npmjs.com/package/node-sass-tilde-importer

чтобы импортировать пакеты через '~' 'это переменная пути node_modules;

И пропиши

const tildeImporter = require('node-sass-tilde-importer');
gulp.task('sass', function() {
   return gulp.src(paths.css)
    .pipe(sass({
        importer: tildeImporter
    }).on('error', sass.logError))
    .pipe(gulp.dest('./'));
});

в scss @import '~normalize.css/normalize'; Без расширения, иначе не включится компилятор так как правило будет интерпретировано как нативное.