Shulou(Shulou.com)05/31 Report--

This article mainly introduces the vue project how to configure sass and the introduction of external scss file related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that you read this vue project how to configure sass and the introduction of external scss file article will have a harvest, let's take a look.

Configure sass and import external scss files to configure sass

Install the corresponding dependent node module

Npm install node-sass-- save-devnpm install sass-loader-- save-dev introduces external scss files

Introduce the required scss file into main.js

If the error appears as shown in the following figure

Open webpack.base.config.js and delete the comments. Because the vue-cli project is configured to compile scss, as long as you install node-sass and sass-loader, you do not need to add your own configuration.

Remember that you need to restart the pit that the project npm run dev stepped on at this time. Vue introduces the Sass file.

Problem: in the process of developing your own web pages with vue cli 3.0, I want to separate the CSS style, because the nesting writing of Sass appears to be very clear, so I personally like it very much.

However, after the CSS style was extracted separately to form a file, it was found that only the first layer style worked.

The question is, why? CSS.section {/ * only this layer works * / width: 500px; height: 500px; background-color:# 409EFF; .header {width: 500px; height: 100px; background-color:#67C23A} .main {width: 500px Height: 300px; background-color:#E6A23C;} .footer {width: 500px; height: 100px; background-color:#F56C6C;}}

First of all, I tried to write the Sass style directly in the vue file, and the result worked, but why didn't it work by pulling it out alone?

Then run the command again

Npm install-save-dev node-sass sass-loader style-loader

Since vue cli 3.0, there are no config.js, build and other files or folders, so you don't need to configure it, just use it.

It still doesn't work after the command has been run.

So Baidu began to feel vaguely that the problem appeared at the time of introduction, not at the time of analysis.

The difference between Baidu @ import url (". / xxx.sass") and @ import ". / xxx.sass

Get the official answer.

Native CSS@import,sass supported by Sass will try to find the corresponding sass file and import it, but native CSS@import will be generated in the following three cases:

The name of the imported file ends with .css

The name of the imported file is an URL address (such as http://www.sass.hk/css/css.css), which can be used with the corresponding service provided by Google font API

The name of the imported file is the url () value of CSS.

That is, you can't import a raw css file directly with sass's @ import, because sass will think you want to use css's native @ import. However, because the syntax of sass is fully compatible with css, you can rename the original css file to the .scss suffix and import it directly.

As a result, the Sass document was parsed incorrectly at the beginning.

This is the end of the article on "how to configure sass and introduce external scss files in vue projects". Thank you for reading! I believe you all have a certain understanding of "how to configure sass and introduce external scss files in vue projects". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.