How do I enable SASS Compiling in Cookiecutter Django?

Question

in the documentation of cookiecutter-django relating to SASS Compiling and Live Reload it's stated that I only have to enter "npm start" (after installing npm of course) in the main project folder to enable Live-Reload and SASS compiling. I was wondering how this should be possible without a package.json file but tried it nevertheless, maybe some hidden thing I did not know about. But npm init of course told me that a package.json was missing. I initialized a new project with bootstrap compilation and gulp enabled, same outcome. Still no package.json. Am I missing some key-point? Or is the documentation in this case maybe incomplete? Where do I get the required package.json from? :)

Answer 1

In the project generation at the beginning, you probably chose "None" on the "js_task_runner" step. If you chose "Gulp" here, it will generate gulpfile.js and package.json file, after which you'll be able to use npm install.

Answer 2

As mentioned in other answers, when you start your project and then choose none for task runner options, it will not work. See js_task_runner on cookiecutter-django documentation.

May I ask where you tried to run npm install? The package.json file is located in the root of your app, so you have to run commands from there.

It should be possible to add the needed files afterwards manually. Create a package.json file in the root directory of your app and add following code. Important: Change name to the name of your app.

{
  "name": "CHANGE_TO_NAME_OF_YOUR_APP",
  "version": "0.1.0",
  "dependencies": {},
  "devDependencies": {
    "bootstrap": "4.1.1",
    "gulp-concat": "^2.6.1",
    "jquery": "3.3.1",
    "popper.js": "1.14.3",
    "autoprefixer": "^9.4.7",
    "browser-sync": "^2.14.0",
    "cssnano": "^4.1.10",
    "gulp": "^4.0.0",
    "gulp-imagemin": "^5.0.3",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.2",
    "gulp-uglify-es": "^1.0.4",
    "pixrem": "^5.0.0"
  },
  "engines": {
    "node": ">=8"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "scripts": {
    "dev": "gulp"
  }
}

Since this project uses gulp.js as task runner you need additionally to the package.json also a gulpfile.js file. Code from this example should work. Check also if you have a scss file in name_of_your_app/static/sass/project.scss.

Now you should be able to run npm install in a first step and compile scss with npm run dev in a second step (see documentation).