1. Execute the order
npm install
2. Global installation Sass
npm i sass -g
3. see sass edition
sass -v
4. Automatically compile files to css file
sass --watch ./sass:./css
5. Write this command to package.json In the file
6. Then execute ：
npm run goSass
If it is found that the above method is not successful , You can also use the following methods .
1. stay vscode Found in our app store easy sass And install
2. After installation , Select file —— Preferences —— set up
3. Click to enter according to the figure below setting.json configuration file .
4. Copy the following code into the file
{ /** Easy Sass plug-in unit **/ "easysass.formats": [ { "format": "compressed", // compress
"extension": ".css" } ], "easysass.targetDir": "./css/" // custom css Output file path }
5. At this time scss Can be automatically compiled into css It's over .
be careful ： The above configuration is only valid for the current workspace . Not configured for the global . If global configuration is required , In the third step, select user settings , Then copy the code to the file set by the user .
appendix ：
vscode Global configuration
{ "editor.fontSize": 18, "files.autoSave": "onFocusChange",// Lost focus auto save
"workbench.startupEditor": "welcomePage", "editor.quickSuggestions": {
"strings": true }, // vue set up "emmet.syntaxProfiles": { "vue-html": "html",
"vue": "html" }, "files.associations": { "*.vue": "vue" }, // vetur set up
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript", // format set up
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"editor.formatOnSave": true, }
Technology