How to set the scss global variable by vue-cli3
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.
