如何在没有 gulp 和 laravel-elixir 的情况下编译 sass [修复]

Question

If You get an error like this :

Then you are in the right place :)

Answer 1

Firstly first you have to delete the node_modules folder from your project. To do this, type these commands :

Please note, copy the module name before deleting the package.json :)

1. rm -rf node_modules
2. rm -rf package-lock.json
3. rm -rf package.json
4. npm cache clean

Now you will need a new package.json by doing this you need this command:

• npm init

hit enter until the command-line comes back.

Now you need to install Node-Sass to do this, type this command:

• npm install node-sass

if there's a problem with permissions try it with sudo, like this:

• sudo npm install node-sass

After installing Node-sass you need to write Node-sass command, go to the package.json file and you will see something like this:

{
  "name": "blog",
  "version": "1.0.0",
  "description": "Bla Bla Bla Bla ...",
  "main": "gulpfile.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "node-sass": "^4.13.1"
  }
}

In the scripts section add an scss command, under the test command, like this:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass resources/assets/sass -o public/css"
}

you can use --watch option, like this:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch resources/assets/sass -o public/css"
}

Which means to watch a directory or file if there's a change, in other terms, it will compile all .scss files every time you hit CTRL + S or CMD + S .

And Finally, run the script:

• npm run scss

Many thanks to Zviad Sichinava .

Learn More about node-sass .