title: How to @import Compass in .SASS file within Simple React App
body: <p>I just started a React App using the Facebook tutorial here: </p>
  
  <p><a href="https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc" rel="nofollow noreferrer">https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc</a></p>
  
  <p>I wanted to get this code snippet working in my react app:
  <a href="https://codepen.io/saransh/pen/BKJun" rel="nofollow noreferrer">https://codepen.io/saransh/pen/BKJun</a></p>
  
  <p>I npm installed these modules: node-sass-chokidar,react-compass, compass-importer, sass-resources-loader
  I put the CSS from the Code pen into a .sass file within my project like so:</p>
  
  <p><a href="https://i.stack.imgur.com/XiTNG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XiTNG.png" alt="enter image description here"></a></p>
  
  <p>Here is the first snippet of the SASS code in Starr.sass</p>
  
  <pre><code>@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%
  </code></pre>
  
  <p>But this seems to be the wrong strategy because I get this error when I do "npm run watch-css": </p>
  
  <blockquote>
    <p>"File to import not found or unreadable: compass"</p>
  </blockquote>
  
  <p>I tried to find online resources for steps to take to get compass to import, and they all talk about different tools: Babel, Webpack, etc, but I am relatively new and do not know which steps to take next. </p>
  
  <p>What are the concrete steps I have to take to go from npm create-react-app to being able to do @import in .SASS files to be used by app? Here is my current package.json file:</p>
  
  <pre><code>    {
    "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 &amp;&amp; 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"
    }
  </code></pre>
  
  <p>I looked at some stackoverflow questions, but did not find what my next logical step would be. Here is one:
  <a href="https://stackoverflow.com/questions/32925570/how-to-configure-webpack-to-use-compass-in-my-project/34967698#34967698">How to configure webpack to use compass in my project</a></p>