Сбой Гэтсби после использования файлов Sass с '@use' sass: color ' - PullRequest
Новая
       14

Сбой Гэтсби после использования файлов Sass с '@use' sass: color '

1 голос
/ 30 марта 2020

Я настраиваю проект Гэтсби с gatsby-plugin-sass.

мой gatsby-config.js файл: 

module.exports = {
  plugins: [
    'gatsby-plugin-resolve-src',
    'gatsby-plugin-sass',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
  ],
}

У меня есть следующие стили структура файла : 

|
|src
|-styles
|--base
|--- _variables.scss
|--components
|--- _Buttons.scss
|--- ...
|--main.scss

Im my _Buttons.scss file Я импортирую вот так: 

@import '../base/variables';
@use 'sass:color as *;

Когда я пытаюсь использовать функции sass color вот так (как указано в https://sass-lang.com/documentation/modules) 

%buttons-focus {
  background-color: color.adjust($primary-color, $alpha: -0.5);
}

Я получаю следующую ошибку: 

Invalid CSS after "...nd-color: color": expected expression (e.g. 1px, bold), was ".adjust($primary-co"

В моем main.s css Я импортирую стили, подобные этому: 

@import './components/Buttons';

Я что-то наблюдаю? Я пытался изменить @use на @import, но безуспешно. Мне кажется, что gatsby-sass-plugin не знает о sass-модулях.

1 Ответ

1 голос
/ 30 марта 2020

Встроенные модули - sass-lang

Только Dart Sass в настоящее время поддерживает загрузку встроенных модулей с помощью @use. Пользователи других реализаций должны вместо этого вызывать функции, используя свои глобальные имена.

Альтернативные реализации Sass - gatsby-plugin-sass

По умолчанию узел реализация Sass (node-sass) используется. Чтобы использовать реализацию, написанную на Dart (dart-sass), вы можете установить sass вместо node-sass и передать его в опции в качестве реализации: 

npm install --save-dev sass

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("sass"),
    },
  },
]
...