Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how vue-cli3 sets scss global variables, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to set scss global variables in vue-cli3. Let's take a look.

Sass supports setting global style variables, and variables can be calculated.

1 prepare the file to store the global style variables

_ variable.scss, the content is as follows:

$theme-color: # 3385ff

2 configure loader

Open vue.config.js in the root directory

Write

Module.exports = {

/ /...

Css: {

LoaderOptions: {

Sass: {

Data:--

@ import "@ / assets/styles/_variable.scss"

--

}

}

}

}

3 use global variables

You can now use global variables directly in each vue file.

Button {

Color: $theme-color

}

This is the end of the article on "how vue-cli3 sets scss global variables". Thank you for reading! I believe you all have a certain understanding of "how to set scss global variables in vue-cli3". 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.