Question

我刚刚在这里使用Facebook教程启动了一个React App：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

我想在我的反应应用中使用此代码段： https://codepen.io/saransh/pen/BKJun

我npm安装了这些模块：node-sass-chokidar，react-compass，compass-importer，sass-resources-loader 我将Code笔中的CSS放入项目中的.sass文件中，如下所示：

以下是Starr.sass

中SASS代码的第一个片段

@import compass


// n is number of stars required
@function multiple-box-shadow ($n)
$value: '#{random(2000)}px #{random(2000)}px #FFF'
@for $i from 2 through $n
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'

@return unquote($value)

$shadows-small:  multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big:    multiple-box-shadow(100)

html
height: 100%

但这似乎是错误的策略，因为当我执行“npm run watch-css”时出现此错误：

“要导入的文件未找到或无法读取：指南针”

我试图找到获取指南针导入的步骤的在线资源，他们都谈论不同的工具：Babel，Webpack等，但我相对较新，不知道接下来要采取哪些步骤。

从npm create-react-app到能够在应用程序使用的.SASS文件中执行@import，我必须采取哪些具体步骤？这是我当前的package.json文件：

    {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "compass": "^0.1.1",
    "node-sass-chokidar": "0.0.3",
    "react": "^16.2.0",
    "react-compass": "^0.1.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1",
    "sass-resources-loader": "^1.3.2"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "compass-importer": "^0.4.1",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6"
  }

我查看了一些stackoverflow问题，但没有找到我的下一个逻辑步骤。这是一个： How to configure webpack to use compass in my project

如何在Simple React App中的@SASS文件中@import Compass

0 个答案: