[Vuejs]-How to compile file sass to file css in one the main file css on the vuejs project

by

0đź‘Ť

My dear friend, if I have understood your meaning correctly, I would like to try to offer you some solutions.

In order to use SCSS in a project and compile it automatically in the background, we can do the following steps:

1. Install node-sass

To get the compiler, we’re going to install the node-sass package.

Go to your terminal, navigate to the project folder and type in the following:

npm i node-sass

2. Create an SCSS folder

Create a new folder called scss in your project. After doing so, copy and paste all the CSS files from your css (or stylesheets) folder to your new scss folder.

enter image description here

Rename the extensions on all the newly pasted css files with .scss

You should end up with a scss folder which looks exactly like your css folder but with the files ending with .scss.

3. Add a script in package.json

In your package.json file, locate scripts and add the following piece of code inside it:

"scss": "node-sass --watch scss -o css"

If your css folder is named something other than css, then replace the word css with the folder name.

Similarly, if your scss folder is named something other scss, then replace scss with the correct folder name.

Setting context in the overall package.json file, the script will be placed like this:

{
   “name”: “example-project”,
   “version”: “0.4.2”,
   “scripts”: {
      “start”: “node ./bin/www”,
      “scss”: “node-sass — watch scss -o css”
},
   "dependencies": {
      "express": "~4.16.0",
      "express-favicon": "^2.0.1",
   }
}

4. Run the compiler

Get back into terminal and run the following commandL

npm run scss

Now you’ll notice any changes you make in your scss files will automatically be reflected in the css files.

if you have any new idea about Compile SASS to CSS you can check another steps with this link.

Leave a comment