Блог

В настоящее время я работаю над настройкой шаблона, в котором используется Gatsby. До сих пор все было очень просто и непринужденно в использовании, но, похоже, я не могу решить одну проблему, которая заключается в подключении SCSS glob к моему глобальному стилю SCSS.

В настоящее время у меня есть локализованный стиль SCSS для каждого компонента. Однако у меня также есть каталог styles для моих глобальных стилей (переменные, типографика … и т.д.). В нем также используется SCSS и он отлично работает. Теперь последнее, что я хочу сделать, это заставить SCSS glob работать, чтобы я мог выполнять импорт, подобный /**/*.scss , в моих глобальных стилях.

В настоящее время я использую gatsby-plugin-sass и включил globImporter в качестве опции в свой gatsby-config.js файл. Однако, похоже, это не подходит для меня.

Из того, что я прочитал, node-sass-glob-importer должно быть то, что мне нужно, но пока безуспешно.

Моя конфигурация выглядит следующим образом

 {
   resolve: `gatsby-plugin-sass`,
   options: {
     importer: globImporter(),
     cssLoaderOptions: {
       camelCase: false,
     },
   },
},
  

Затем я пытаюсь выполнить глобальный импорт в свой scss вот так @import "./**/*.scss"; , но я получаю следующую ошибку:

An @import loop has been found:

кто-нибудь настраивал scss glob в gatsby или видел что-нибудь неправильное в моих конфигурациях.

Спасибо

Если у вас все еще возникает эта проблема (или на случай, если у кого-то еще есть), вот что сработало для меня:

 options: {
  importer: function(url, prev, done) {
    // url is the path in import as is, which LibSass encountered.
    // prev is the previously resolved path.
    // done is an optional callback, either consume it or return value synchronously.
    // this.options contains this options hash, this.callback contains the node-style callback
    var result = globImporter();
    return {file: result.path, contents: result.data};
  }
},
  

Он был вдохновлен примером кода в node-sass репозитории.

Убедитесь, что он также включен var globImporter = require('node-sass-glob-importer') в верхней части вашего файла.