Problem: Although most of them use webpack for front-end development now, you can install dependencies for packaging, but you will also encounter the situation of pure css files. At this time, it is too uncomfortable to use css.
Solution:
Step 1: install dependencies, install sass dependencies, global installation can be recommended
npm install sass -g
Step 2: Execute the command
npx sass test.scss test.css
This command will compile the test.scss file in the current directory into a test.css file. Of course, you can also specify a folder. For example, the following command will compile the test.scss file in the current directory into the test.css file under dist;
npx sass test.scss dist/test.css
At this point, the compilation of the scss file has been completed, but sometimes we hope that when the scss file is modified, it can be compiled automatically. The command is as follows:
npx sass --watch test.scss dist/test.css
After running this command, when you change the scss file, it can be automatically compiled into a css file;
at this time, a map file will be generated. If you don’t want it, the command is as follows:
npx sass --watch test.scss dist/test.css --no-source-map