импорт .scss с ReactJs

Question

Я новичок, чтобы отреагировать, я пытаюсь импортировать файлы SCSS в мою таблицу стилей CSS, но появляется следующая ошибка

Я пытаюсь применить этот UI Kit для реагирования приложения https://github.com/wfp/ui и вот инструкция по его использованию введите описание ссылки здесь

Failed to compile
./node_modules/@wfp/ui/source/globals/scss/styles.scss
Module build failed: Syntax Error 

(30:1) Unknown word

  28 | 
  29 | @import 'text-gradient';
> 30 | //@import '../grid/grid';
     | ^
  31 | 
  32 | //-------------------------

вот несколько кодов в App.css

     @import '../node_modules/@wfp/ui/source/globals/scss/styles.scss'; 

    .App {
      text-align: center;
    }

вот часть style.scss, которую я импортирую

//-------------------------
// ? Global
//-------------------------

$css--font-face: true !default;
$css--helpers: true !default;
$css--body: true !default;
//$css--use-experimental-grid: false !default;
//$css--use-experimental-grid-fallback: false !default;
$css--use-layer: true !default;
$css--reset: true !default;
$css--typography: true !default;

@import 'colors';
@import 'vars';
@import 'mixins';
@import 'layout';
@import 'layer';
@import 'rtl';
@import 'spacing';
@import 'typography';
@import 'import-once';
@import 'css--reset';
@import 'css--font-face';
@import 'css--helpers';
@import 'css--body';
@import 'css--typography';

@import 'text-gradient';
//@import '../grid/grid';

//-------------------------
// ☠️  Manage deprecations
//-------------------------

скажите, пожалуйста, что вы хотели бы увидеть, чтобы обновить вопрос

Answer 1

что я сделал, чтобы решить эту проблему - импортировать ссылку CDN

 <link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.wfp.org/guides/ui/v1.1.16/assets/css/styles.min.css"
/>

в index.html. Я не смог решить проблему импорта scss, но это сработало для меня

Answer 2

Следующие шаги должны работать с вами

1- запустить npm установить node-sass

2- в вашем App.js

08-07-2019 Обновлен код @ Применены стили WFP

import React from 'react';
import logo from './logo.svg';
import './App.css';
import "../node_modules/@wfp/ui/source/globals/scss/styles.scss";

function App() {
  return (
<div className="App">
  <div id="container" style={{ flexBasis: "auto" }}>
    <div className="storybook-readme-story">
      <div>
        <button
          tabindex="0"
          className="wfp--btn wfp--btn--secondary"
          type="button"
        >
          Cancel
        </button>
        <button
          tabindex="0"
          className="wfp--btn wfp--btn--primary"
          type="button"
        >
          Submit
        </button>
      </div>
    </div>
  </div>
</div>
  );
}

export default App;