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

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!

Recommended reading:

How to create a countdown function for Date objects

Detailed explanation of the dynamic use of v-model in vue

The above is the detailed content of Detailed explanation of vue-cli+sass usage. For more information, please follow other related articles on the PHP Chinese website!