Adding SCSS to a Node Express Parcel and Handlebars project (And possibly gulp?)

Programming Questions
1

Hello,

I am trying to add SCSS to a Node/Express project (per this Node/Express Guide)

I use parcel as a bundler.

Looking at the parcel docs it suggests you can just inline the scss once you install the npm parcel SCSS package:

The inline would look like this, which is how I currently include CSS:
<link rel="stylesheet" href="./style.scss">

However, from what I have read, this only works with .html and it seems does not work with handlebars.

When I launch the dev instance of my server, no css shows up.

What is the way to set this up so I can use CSS with the Node/Express/Handlebars/Parcel stack?

2 Likes
2

Check the example here:

In your frontend assets directory, create a file called parcel-entry.js.

Add some import statements that point to your JavaScript and scss entry points. In that repo, it looks like this:

import "./scripts/index"; // this will point to an index.js or similar file
import "./styles/index.scss";

Then I made two scripts called npm_start.sh and npm_build.sh. Make those executable by running chmod +x <filename> on them. Those files contain code to delete any old build files and rebuild them according to the settings you put in the shell scripts:

For example, the npm_start.sh script looks like this:

#!/bin/bash

# delete the existing build files
echo 'removing old build'
rm -rf ./codeselfstudy/static/dist

# build the assets and watch for changes
echo 'rebuilding the assets'

# here it points to the parcel-entry.js file,
# tells it where to put the build files (--out-dir),
# tells it what the public-path to the frontend build files is (--public-url),
# and tells it what to name the output files (--out-file), i.e., (main.js, main.css)
npx parcel codeselfstudy/static/src/parcel-entry.js \
    --hmr-port 34471 \
    --out-dir codeselfstudy/static/dist \
    --public-url /static/dist/ \
    --out-file main

Then in your main package.json file, point the start and build scripts at the relevant shell scripts:

"scripts": {
    "start": "./scripts/npm_start.sh",
    "build": "./scripts/npm_build.sh"
}

Find me on chat this evening if you want to walk through it while screensharing.

1 Like
3

This is all great, thanks Josh! I started working through the github instructions and have a bash script now. I did chmod 777 instead of chmod +x

So maybe I will chmod 644 and then do chmod +x

I am also using gulp to minify the css (not sure why) so may see if I can add gulp to my bash script for the dev command. Will follow up. Thanks for the detailed instructions!

1 Like
4

I think

chmod 644 file.txt
chmod +x file.txt

will give you the same as

chmod 755 file.txt

If you want the minimum runnable permissions (that aren’t too annoying) you can do:

chmod 744 file.txt

or just something like this to an ordinary file:

chmod u+x file.txt

which should give you 764 instead of the 775 that is probably what you get if you run just chmod +x file.txt on an ordinary file.

(The u+x part means add “executable” just to the user/owner.)

I don’t think it matters much if the file isn’t exposed anywhere, but maybe someone here who knows more about security would know.

Example of 744:

owner group others
111 (7) 100 (4) 100 (4)
rwx r-- r--

(The owner can read, write and execute, but everyone else can only read the file.)

As long as the first digit is 7 then it should be fine. :slight_smile:

1 Like
5

Perfect, I will use 755. Thanks Josh!

1 Like
6

OK, so basically I am turning more and more into a gulp fan, but managed to solve things that way.

Per your post, I still made a shell script call dev.sh

In there I have all the watch files load when I run npm run dev in my package json.

So my package JSON looks like this:

"scripts": {
        "dev": "./dev.sh",
        "build": "..    etc/..
           }

And then dev.sh looks like this:

NODE_ENV=development concurrently "gulp watch" "npx nodemon server.js -e js,hbs,json," 
"npx parcel watch ./clientSideJS/nutritionFactsToolsJS/index.js 
./clientSideJS/rankingToolsJS/index.js 
./clientSideJS/ratioTool/index.js 
./clientSideJS/dashboard/index.js 
./clientSideJS/homePageAutoComplete/index.js 
./clientSideJS/brandFoods/index.js 
-d ./public/js/"

The "gulp watch" task starts the watch for the scss conversion.
So the gulpfile.js has the following task for watching:

gulp.task('watch', function(){
  gulp.watch('./public/devCSS/*.scss', gulp.series(['sass'])); 
  // Other watchers
})

And then the scss package task is as follows:

gulp.task('sass', function(){
  return gulp.src(['./public/devCSS/allPages.scss', './public/devCSS/landingPages.scss'])
    .pipe(concat('SCSStest.css'))
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    //.pipe(cleanCSS())
    .pipe(gulp.dest('./public/css'))
});

But I also like how you can call multiple tasks with gulp watch! :smiley:

In order to use gulp SCSS you need this library:

Which I now realize lists the exact example I just posted.

I also found this guide really useful:

OK, now to start writing some Sassy CSS… maybe one day I will even be writing less :wink:

1 Like