为什么我无法使用＆＃39; @ import＆＃39;将scss添加到＆＃39; create-react-app＆＃39;项目

Question

这是我的sccs文件

@import url(https://fonts.googleapis.com/css?family=Work+Sans&subset=latin-ext);
@import url(https://fonts.googleapis.com/css?family=Graduate);
@import 'modules/variables';

body {
  background: url('https://res.cloudinary.com/dfe57evk4/image/upload/v1497030530/beautiful_mountains_of_the_world-wallpaper-1920x1200_ooutrw.jpg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;

  h2 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    margin-bottom: 24px;
  }

  hr {
    margin-top: 3rem;
    margin-bottom: 0rem;
  }

  .text-center {
    text-align: center;
  }

  .new-note-parent {
    padding: 0;

    .new-note {
      background-color: $purple;
      border-color: $purple;
      font-family: 'Work Sans', sans-serif;
      font-size: 20px;
      margin: 10px 0;

      &:hover {
        background-color: $purple-brighter;
      }
    }
  }

  .notes-list {
    padding: 0;

    .list-group-item {
      font-family: 'Work Sans', sans-serif;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .note-show {
    margin-top: 30px;
    margin-bottom: 25px;
    padding: 25px;
    background: $white;
    border: 1px solid $white-darker;

    .note-text {
      font-family: 'Work Sans', sans-serif;
      font-size: 20px;
    }

    .small-buttons {
      position: relative;
      top: -34px;
    }

    .date-time {
      position: relative;
      top: 0px;
      width: 300px;
      font-style: italic;
      font-size: 10px;
      margin: 0 auto;
    }
  }

  .form-fields {
    display: flex;
    align-items: center;
    height: 100vh;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    font-size: 20px;

    .form-group {
      margin-bottom: 0;
    }

    .form-title {
      font-family:'Graduate', sans-serif;
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 0;
      color: $white;
    }

    .form-control-title {
      font-size: 25px;
      margin-bottom: 8px;
    }

    .form-control-content {
      font-size: 18px;
      min-height: 150px;
    }

    .text-help {
      background: $white;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    a {
      margin-left: 7px;
    }
  }

  .error-main {
    color: $white;
    background: $error-background-green;
  }

  .error-del {
    color: $white;
    background: $error-background-red;
    margin-top: 10px;
  }

  @media (min-width: 300px) {
    .form-control-title,
    .form-control-content {
      width: 300px !important;
    }
  }

  @media (min-width: 543px) {
    .note-show {
      margin-top: 0px;

      .date-time {
        top: 32px;
        font-size: 16px;
      }

      .small-buttons {
        position: static;
        top: 0px;
      }
    }

    .form-control-title,
    .form-control-content {
      width: 400px !important;
    }
  }
}

这是一个错误：

C:\A\react-js-notepad\front-end\node_modules\sass-graph\parse-imports.js:20
        throw new Error('Encountered invalid @import syntax.');
        ^

Error: Encountered invalid @import syntax.
    at parseImports (C:\A\react-js-notepad\front-end\node_modules\sass-graph\parse-imports.js:20:15)
    at Graph.addFile (C:\A\react-js-notepad\front-end\node_modules\sass-graph\sass-graph.js:69:17)
    at C:\A\react-js-notepad\front-end\node_modules\sass-graph\sass-graph.js:54:13
    at arrayEach (C:\A\react-js-notepad\front-end\node_modules\lodash\lodash.js:508:11)
    at Function.forEach (C:\A\react-js-notepad\front-end\node_modules\lodash\lodash.js:9334:14)
    at new Graph (C:\A\react-js-notepad\front-end\node_modules\sass-graph\sass-graph.js:53:7)
    at Object.module.exports.parseDir (C:\A\react-js-notepad\front-end\node_modules\sass-graph\sass-graph.js:156:17)
    at buildGraph (C:\A\react-js-notepad\front-end\node_modules\node-sass-chokidar\bin\node-sass-chokidar:238:23)
    at watch (C:\A\react-js-notepad\front-end\node_modules\node-sass-chokidar\bin\node-sass-chokidar:246:15)
    at run (C:\A\react-js-notepad\front-end\node_modules\node-sass-chokidar\bin\node-sass-chokidar:333:5)

这是我的package.json文件：

{
  "name": "react-js-notepad",
  "version": "0.9.9",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.1.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.0",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-form": "^7.2.3",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css & react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "eslint": "^4.14.0",
    "eslint-config-callstack-io": "^1.0.1"
  }
}

你有什么想法吗？为什么我不能使用scss @import语法？

我使用了那个简短的教程 - ＆gt; https://www.youtube.com/watch?v=2QaI5ajg4Hw

我也发现了这个讨论，但我不明白......自12月以来它是一个已知的错误还是什么？ https://github.com/xzyfer/sass-graph/issues/89