Below describes the main steps for setting up a project folder to be able to compile scss files to your css files.
Setup Project
- Required files / directory structure
project_name/css/style.css
project_name/sass/main.scss
- Create the project’s
package.json
file. Using the terminal:- navigate to
project_name
- run
npm init
following the instructions - creates
project_name/package.json
- navigate to
- Install Sass. Using the terminal:
- navigate to
project_name
- run
npm install node-sass --save-dev
- creates
project_name/node_modules/all-packages-inside
- updates
package.json
with the following:
- navigate to
"devDependencies": { "node-sass": "^4.12.0" }
- Setup compile scss to css script
- navigate to
project_name
- update
package.json
with the following line in the"scripts"
object
- navigate to
"scripts": { "compile:sass": "node-sass sass/main.scss css/style.css -w" },
- Run scss to css compiler. In the terminal:
- Navigate to
project_name
- call
npm run compile:sass
- saved changes to
main.scss
will call the compiler and updatestyle.css
- to exit the compiler, either close the terminal window or use
ctrl ^c
to exit the process.
- Navigate to
Transfer project
- Transfer files / folders
project_name/css/style.css
project_name/img/all-files-and-folders
project_name/sass/all-files-and-folders
project_name/index.html
project_name/package.json
- DO NOT INCLUDE
project_name/node_modules/
- In renamed
project_name_v2
with all transferred folders and files. In the terminal:- Navigate to
project_name_v2
- Call
npm install
– this looks at yourpackage.json
file and installs any saved dependencies (node-sass
) and recreates theproject_name_v2/node_modules/with-all-required-packages
- Navigate to
- Run scss to css compiler. In the terminal:
- Navigate to
project_name_v2
- call
npm run compile:sass
– saved changes tomain.scss
will call the compiler and updatestyle.css
- to exit the compiler, either close the terminal window or use
ctrl ^c
to exit the process.
- Navigate to
Leave a comment