{"id":2237,"date":"2017-05-29T15:10:04","date_gmt":"2017-05-29T10:10:04","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=2237"},"modified":"2017-05-29T23:36:56","modified_gmt":"2017-05-29T18:36:56","slug":"introducing-wpsass-use-sass-wordpress-via-node-npm-scripts","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/introducing-wpsass-use-sass-wordpress-via-node-npm-scripts\/","title":{"rendered":"Introducing WPSass: Use Sass with WordPress via Node NPM Scripts"},"content":{"rendered":"

\ud83d\ude4c WPSass is a simple way to use Sass with WordPress via Node NPM Scripts in SCSS flavor.<\/p>\n

\ud83d\ude80 WPSass on GITHUB: \u2605 98 \u2442 14 \u2192<\/a>#<\/a><\/h2>\n

\ud83e\udd14 So, I am working on a WP REST API product launch, for which I had to build several simple HTML pages inside WordPress. All I had to do was compile Sass to CSS. Where I found WPGulp<\/a> to be an overkill.<\/p>\n

So, I went ahead and wrote a very simple package for just one thing. Sass to CSS conversion in WordPress development. It doesn’t even use Gulp. Use Sass with WordPress via Node NPM Scripts in SCSS flavor.<\/p>\n\n\n\n
\n WPSass<\/strong>
\n Use Sass with WordPress via NPM Scripts.\n <\/td>\n<\/tr>\n
\n A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais<\/a>.\n <\/td>\n\n
\n
\n <\/a>\n <\/td>\n<\/tr>\n<\/table>\n

Use Sass with WordPress, Node Script in SCSS flavor.<\/p>\n

\"WPSass\"<\/p>\n

Make sure you have node installed. If not download and install node<\/a>.<\/p>\n

\u2192 STEP #1: Install NodeJS & NPM#<\/a><\/h2>\n

After installing NodeJS you can verify the install of both NodeJS and Node Package Manager by typing the following commands. This step needs to be followed only once i.e. if you don’t have NodeJS installed. No need to repeat it ever again.<\/p>\n

node -v\n# v7.10.0\n\nnpm -v\n# 4.2.0<\/code><\/pre>\n
\u2192 Step #2. Download package.json<\/code>#<\/a><\/h2>\n
Download package.json<\/code><\/a> file inside the root folder of your WordPress plugin or WordPress theme
\nIf you have cURL installed then you can run the following command to download it in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download package.json<\/code><\/a> file in it).<\/p>\n
curl -L 'https:\/\/git.io\/wpsass' -o package.json<\/code><\/pre>\n
\u2192 STEP #3: Installing Node Dependencies#<\/a><\/h2>\n
We are in the root folder of our WordPress plugin or WordPress theme at the moment, let’s install the Node Dependencies. In the terminal run this command and wait for it to download all the NodeJS dependencies. It’s a one time process and can take about a minute depending on the internet speed of your connection.<\/p>\n
# For MAC OS X run the following command with super user\nsudo npm install\n\n# For Linux run the following command\nnpm install<\/code><\/pre>\n
\u2192 STEP #4: Configure NPM Scripts#<\/a><\/h2>\n
Now, configure the NPM scripts. There are only two of them. If you open the package.json<\/code><\/a> file. There are two scripts as follows:<\/p>\n
\"scripts\": {\n  \"css\": \"node-sass --output-style compressed --include-path scss assets\/css\/source.scss style.css\",\n  \"watch\": \"nodemon -e scss -x \\\"npm run css\\\"\"\n},<\/code><\/pre>\n
In the css<\/code> script, you need to change<\/p>\n