Detailed explanation of vue-cli+sass usage

This time I will bring you a detailed explanation of the use of vue-cli sass, and what are the precautions for using vue-cli sass. The following is a practical case, let's take a look.

I think it is very unwise to write the style directly in the of each single file. Not to mention the various pitfalls in the node-sass installation process, the embedded also makes the components very confusing. Imagine that you have to drag the scroll wheel through dozens or hundreds of lines of CSS code when modifying a certain method, or you want to modify a set of styles, but you cannot find the corresponding CSS files because they are scattered in the Vue file. . .

In my opinion, the correct approach should be to manage the sass files separately, and then directly introduce the compiled css files into main.js. Like iView, ElementUI all adopt this approach.

Under the style folder are classified scss files to facilitate management and later maintenance. Then introduce all scss style fragments in main.scss, use sass --watch main.scss:main.css The command listens and compiles scss files into css files. Finally, introduce the main.css file into main.js. In this way, you can add classes directly to elements and then write styles in scss.

Of course, we don’t want to manually enter these commands every time. The initial idea is to modify the dev command,

, but this will not achieve the effect, because only the previous command will be started each time. So consider using batch processing to achieve:

Place these two .bats in the root directory, and then configure package.json:

In this way, you can use npm run dev to start hot reload and sass watch with one click.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!