The correct way to open vue-cli + sass

This article mainly introduces you to the correct way to open vue-cli + sass. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Regarding how to configure sass in a project built with vue-cli, the answer found on the Internet is basically this:

But 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.

If you agree and plan to adopt this approach, look at the following specific example:

The project structure is as shown above, under the style folder It is a classified scss file to facilitate management and later maintenance. Then introduce all scss style fragments in main.scss, use the sass --watch main.scss:main.css command to monitor and compile the scss file into a css file. 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 does not achieve the effect, because only the previous command will be started each time. So I considered using batch processing to implement it:

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.

Related recommendations:

Detailed examples of vue-cli optimized webpack configuration

Detailed examples of vue-cli vscode configuration eslint

vue-cli quickly builds vue applications and implements webpack packaging detailed explanation