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

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!

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.