How to use sass globally in vue3.0
This article introduces the relevant knowledge of "how to use sass globally in vue 3.0". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!
vue3.0 sass global usage
You need to install a plugin: sass-resources-loader
npm i sass-resources-loader --save-dev
Create a scss file common.scss
$input-color: #888;
Configuration in vue.config.js (official website grey machine)
// css Preset Configuration Item loaderOptions: { //pass options to sass-loader scss: { // sass-loader version V8 and above prependData: '@import "~@/assets/common.scss";' // sass-loader version below V8 // additionalData: '@import "~@/assets/common.scss";' }}
Use directly in components
input { color: $input-color;}
sass installation notes: node version and node-sass dependency version inconsistency problem, sass-loader11 requires webpack5, webpack version control is to install vue cl version, vue cl 5 webpack5
As a final step, remember to restart the project!
vue 3.0 Getting started with sass
Four Steps to Using Sass Styles in VUE
1. Install the sass package using npm
Use npm to install node-sass, sass-loader, install-save-dev, use it in the development environment, install the specific version as follows:
"node-sass": "^4.14.1","sass-loader": "^9.0.3"2. New scss file
The scss snippet is as follows:
_variables.scss
// colors$colors: ( "primary": #00E5FF, "purple": #9e6fef, "light-purple": #BFBDFF, 'yellow': #FFF701);$base-font-size: 1rem;$font-sizes: ( xxs: 0.5714, // 8px xs: 0.7143, // 10px sm: 0.8571, // 12px md: 1, // 14px lg: 1.1429, // 16px xl: 1.4286 // 20px);
style.scss
@import './ variables';// color@each $colorKey, $color in $colors { .text-#{$colorKey} { color: $color; }}// font-size@each $sizeKey, $size in $font-sizes { .fs-#{$sizeKey} { font-size: $size * $base-font-size; }}3. Introduce style.scss file in main.js
Because the styles introduced in the main.js file are globally available, the introduced statements are as follows:
import './ The requested URL/scss/style.scss'was not found on this server.
For example:
Big Five personality test
The implementation is as shown in the figure:
The content of "how to use sass globally in vue 3.0" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!
