In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article is about how Vue2.x installs and uses SCSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
What is SCSS
SCSS is a mature, stable and powerful CSS preprocessor, while SCSS is a new syntax feature introduced in the Sass3 version, which is fully compatible with CSS3 and inherits the powerful dynamic functions of Sass.
II. The difference between SCSS and CSS
SCSS stands for Sassy CSS. Unlike Sass, SCSS is not based on indentation.
The .sass extension is used as the original syntax for Sass, while SCSS provides updated syntax through the .scss extension.
Unlike Sass, SCSS has curly braces and semicolons like CSS.
In contrast to SCSS, Sass is difficult to read because it is very different from CSS. This is why SCSS is the more recommended Sass syntax because it is easier to read and very similar to Native CSS, while enjoying the power of Sass.
SCSS is better!
3. Install SCSS in Vue
It is recommended that you install it in the cmd window and open it as an administrator.
♻️ install SCSS
Using Ali CVM download dependency, domestic download will be faster than npm external network download dependency.
Cnpm I-D node-sass sass-loader//vue2.5.2 needs to be downgraded to install cnpm I-D node-sass@4.14.1 sass-loader@7.3.1 ♻️ running project for testing
Enter the following command to run the project
Npm run dev
Run successfully ~
Fourth, use SCSS in the project
Specify the style language as scss in the vue file
Vue code
Ordinary Yes
So far, use SCSS~ perfectly.
Supplement: global reference scss
First install this plug-in to reference scss globally
Npm install sass-resources-loader-save-dev
Then modify the utils.js file in the build folder
Set
Scss: generateLoaders ('sass')
Change to
Scss: generateLoaders ('sass') .concat ({loader:' sass-resources-loader', options: {resources: path.resolve (_ _ dirname,'.. / src/assets/index.scss') / / change here to your own index.scss file path}})
Each component in the project can directly use the variables and styles in the base.scss file. Remember to add lang= "scss" to style
⛺SCSS common commands
SCSS official documentation
Common command
Mixed style: @ mixin name (parameter 1, parameter 2...) {... }
Take the mixed style: @ include name (@ mixin's name)
Inheritance style: @ extend needs to inherit the name of the class, ID name, custom mixed style, etc.
Import scss style: @ import "scss file name"
Condition control instruction: @ if condition {... }
Loop control instruction:
@ for $var from through-including end values
@ for $var from to-does not include end value
Control instruction for circular List project: @ each $var in $List {}
Condition judgment cycle: @ while condition {... }
User-defined function: @ function name (parameter 1, parameter 2...) {... }
Warning and error tips:
@ warn "…" -output a warning at the terminal
@ error "…" -output errors in .css files and terminals
Thank you for reading! This is the end of the article on "how to install and use SCSS in Vue2.x". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.