Как включить SCSS Glob в проект Гэтсби? - PullRequest
Новая
       21

Как включить SCSS Glob в проект Гэтсби?

1 голос
/ 26 марта 2019

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

В настоящее время у меня есть локализованный стиль SCSS для каждого компонента.Тем не менее, у меня также есть каталог стилей для моих глобальных стилей (переменные, типография ... и т. Д.).Это также использует SCSS и работает отлично.Теперь последнее, что я хочу сделать, - это заставить глобус SCSS работать так, чтобы я мог выполнять импорт как /**/*.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Глэбс на Гэтсби или увидеть что-то не так с моими конфигурациями.

Спасибо

1 Ответ

0 голосов
/ 22 мая 2019

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

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') вверху файла.

...