Question

我是新来的反应者，我正在尝试将SCSS文件导入我的CSS样式表，但是出现以下错误

我正在尝试使用此UI Kit来响应应用程序https://github.com/wfp/ui 这是有关如何使用它的说明enter link description here

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

以下步骤应与您合作

1-运行 npm install 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;

Answer 2

解决此问题的方法是导入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问题，但这对我有用

用ReactJs导入.scss

2 个答案: