2

I just started a React App using the Facebook tutorial here:

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

I wanted to get this code snippet working in my react app: https://codepen.io/saransh/pen/BKJun

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:

enter image description here

Here is the first snippet of the SASS code in Starr.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%

But this seems to be the wrong strategy because I get this error when I do "npm run watch-css":

"File to import not found or unreadable: compass"

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.

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:

    {
  "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"
  }

I looked at some stackoverflow questions, but did not find what my next logical step would be. Here is one: How to configure webpack to use compass in my project

RebeccaK375
  • 871
  • 3
  • 17
  • 28
  • Did you install compass? http://compass-style.org/install/ – mrbarletta Feb 24 '18 at 18:34
  • I did! I installed Ruby and then did gem install compass. However, I did not do anything beyond that. So, I created my react app, installed ruby, installed compass, installed .sass module with npm, and then created Stars.sass file. Did I need to take an additional step? – RebeccaK375 Feb 24 '18 at 18:44
  • I don't think so - what happens if you remove the compass import, and try with a simple sass file just to see if it works? – mrbarletta Feb 24 '18 at 19:29

0 Answers0