├── .gitignore ├── package.json ├── LICENSE.md ├── README.md └── bin └── react-scripts-with-sass.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | coverage 4 | .nyc_output 5 | dist 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-app-sass", 3 | "version": "1.1.0", 4 | "description": "Add sass support to create-react-app.", 5 | "main": "./bin/react-scripts-with-sass.js", 6 | "bin": { 7 | "react-scripts-with-sass": "./bin/react-scripts-with-sass.js" 8 | }, 9 | "scripts": {}, 10 | "repository": "rickharrison/create-react-app-sass", 11 | "keywords": [ 12 | "create-react-app", 13 | "react", 14 | "sass" 15 | ], 16 | "author": "Rick Harrison", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/rickharrison/create-react-app-sass/issues" 20 | }, 21 | "homepage": "https://github.com/rickharrison/create-react-app-sass", 22 | "dependencies": { 23 | "cross-spawn": "^4.0.2", 24 | "find-remove": "^1.0.0", 25 | "node-sass": "^3.10.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Rick Harrison 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This project has been *deprecated* 2 | 3 | Please use https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc instead. 4 | 5 | # create-react-app-sass 6 | 7 | Enhances [create-react-app](https://github.com/facebookincubator/create-react-app) to include support for [Sass](http://sass-lang.com/). 8 | 9 | ### Installation 10 | 11 | ``` 12 | npm install create-react-app-sass --save-dev 13 | ``` 14 | 15 | ### Usage 16 | 17 | Replace your `start` and `build` scripts in your `package.json` 18 | 19 | ``` 20 | "scripts": { 21 | "start": "react-scripts-with-sass start", 22 | "build": "react-scripts-with-sass build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | }, 26 | ``` 27 | 28 | Your `src` directory will automatically re-compile any `.scss` file into a `.css` file with the same name in the same location. Then you can `import` the `.css` file in your components the same way as before using `create-react-app`. You will also need to add `*.css` to your `.gitignore` file as they are now just a build artifact and your `.scss` is the true source. 29 | -------------------------------------------------------------------------------- /bin/react-scripts-with-sass.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const findRemove = require('find-remove'); 4 | const path = require('path'); 5 | const spawn = require('cross-spawn'); 6 | const script = process.argv[2]; 7 | 8 | switch(script) { 9 | case 'start': 10 | findRemove(path.join(process.cwd(), 'src'), { extensions: '.css' }); 11 | 12 | const reactScripts = spawn('react-scripts', ['start'], { 13 | stdio: 'inherit' 14 | }); 15 | 16 | const sassBuild = spawn('node-sass', ['src', '--output', 'src'], { 17 | stdio: 'inherit' 18 | }); 19 | 20 | const sassWatch = spawn('node-sass', ['src', '--watch', '--output', 'src'], { 21 | stdio: 'inherit' 22 | }); 23 | 24 | break; 25 | 26 | case 'build': 27 | findRemove(path.join(process.cwd(), 'src'), { extensions: '.css' }); 28 | 29 | spawn.sync('node-sass', ['src', '--output', 'src'], { 30 | stdio: 'inherit' 31 | }); 32 | 33 | spawn.sync('react-scripts', ['build'], { 34 | stdio: 'inherit' 35 | }); 36 | 37 | break; 38 | 39 | default: 40 | console.log('Unknown script: ' + script); 41 | console.log('Perhaps you meant to run `react-scripts` or `react-scripts-with-sass start`'); 42 | break; 43 | } 44 | --------------------------------------------------------------------------------