vue-cli2项目中使用scss

前言:

首先要搞清楚Sass和Scss的区别:
       实际上Sass和Scss是同一种东西,Scss是 Sass3 引入新的语法,它们都是css预处理器。通常称为Sass,但存在两种不同的语法风格:
文件扩展名:Sass 默认使用“.sass”作为文件扩展名,而 Scss 使用“.scss”作为扩展名。
语法书写方式:Sass 最初是以严格的缩进式语法规则来书写,不带大括号和分号,这种方式使得代码更加简洁,但在某些情况下可能不如Scss直观易读;相比之下,Scss的语法允许使用大括号和分号,与常规的 css语法相似,这使得 Scss更容易被 css开发者接受和使用。
除此之外,在功能上,Sass 和 SCSS 都支持变量、嵌套规则、混合宏等功能,这些功能大大提高了样式表的可维护性和灵活性。

总结来说,尽管 Sass 和 SCSS 在文件扩展名和语法书写方式上有所不同,但本质上是相同的 CSS 预处理器,提供了比传统 CSS 更强大的功能和灵活性。开发者可以根据个人喜好选择使用 Sass 或 SCSS 语法。

一、安装使用scss

  1. 安装 scss
npm install scss --save
  1. 安装 node-sass 和 sass-loader
npm i node-sass@4.14.1 sass-loader@7.3.1 -s

提示:限制 node-sass,sass-loader 版本号,防止默认安装的版本号过高
在这里插入图片描述

  1. 配置 webpack.base.conf.js 文件
    在 build 文件夹下的 webpack.base.conf.js 文件中对 rules 增加下面的内容
rules: [{test: /\.scss$/,loaders: ['style', 'css', 'sass']},
]
  1. 组件中使用 scss
    在组件中style标签上添加属性 lang=“scss”,就可以使用scss了
<style lang="scss">#app{font-family: 'Avenir', Helvetica, Arial, sans-serif;color: #2c3e50;width: 100%;}
</style>

二、设置scss变量

  1. 安装 sass-resources-loader 实现全局变量
npm i sass-resources-loader -s
  1. 新建一个 global.scss 文件
    在assets文件夹里面新建一个global.scss文件,用于存放所有的公共变量
  2. 修改build 文件夹里的 utils.js 文件
    将 scss: generateLoaders(‘sass’) 修改为下面的内容
scss: generateLoaders('sass').concat({loader: 'sass-resources-loader',options: {resources: path.resolve(__dirname, '../src/assets/global.scss') }
})
  1. 重新启动项目就可以使用了

三、使用全局变量

  1. 在global.scss文件中设置全局变量
// 变量
$font_size: 19px;
$color: #ff701c;
$bg_color: #f1f1f1;

在页面中使用

<style lang="scss">#app{font-family: 'Avenir', Helvetica, Arial, sans-serif;color: $color;background: $bg_color;font-size: $font_size;width: 100%;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/843114.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索Python的包与模块:构建项目的基石

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、模块与包的基础认知 1. 模块的定义与创建 2. 包的组织与管理 二、模块与包的进阶使用…

懒人创业秘诀揭秘:加入萤瓴优选项目,普通人也能打开财富大门

创业对于很多人来说&#xff0c;是一个艰难而复杂的过程。然而&#xff0c;时代的发展带来了新的机遇&#xff0c;懒人创业成为了一种趋势。加入萤瓴优选项目&#xff0c;普通人也能轻松打开财富大门。本文将揭秘懒人创业的秘诀&#xff0c;并分析萤瓴优选项目如何帮助普通人实…

极致产品力|从toB到toC,年销4.2亿份的冻干品牌是如何炼成的?

天野食品是日本冻干食品长红40年的品牌&#xff0c;从制造焦糖的小工厂&#xff0c;转变为日本冻干速食的行业第一&#xff0c;它是如何做到的呢? 深耕TOB业务&#xff0c;如何在ToC业务创造增长 天野公司以冻干食品闻名但并非以此起家。自1940年成立以来&#xff0c;便以染料…

tomcat不定时宕机,Failed to write core dump

在linux上的tomcat部署的web应用&#xff0c;不定时会自动挂掉&#xff0c;排查tomcat安装路径/logs/catalina.out 发现提示Failed to write core dump. Core dumps have been disabled. To enable core dumping, try "ulimit -c unlimited" before starting Java a…

前端本地项目启动供后端或者测试调试

目录 1、项目本地启动的地址 2、打开终端输入 ifconfig 查找ip 3、将localhost替换成ip即可供他人测试 1、项目本地启动的地址 http://localhost:8100/?module220&webRoutevpc-gray&backRoutevpc-gray........................... 2、打开终端输入 ifconfig 查找i…

DreamPose: Fashion Image-to-Video Synthesis via Stable Diffusion

UW&UCB&Google&NVIDIA ICCV23https://github.com/johannakarras/DreamPose?tabreadme-ov-file 问题引入 输入参考图片 x 0 x_0 x0​和pose序列 { p 1 , ⋯ , p N } \{p_1,\cdots,p_N\} {p1​,⋯,pN​}&#xff0c;输出对应视频 { x 1 ′ , ⋯ , x N ′ } \{x_1,…

智慧园区:打造未来城市的新模式

随着城市化进程的加速和科技创新的推动&#xff0c;城市面临着诸多挑战和机遇。如何提升城市的竞争力和可持续性&#xff0c;是一个亟待解决的问题。在这个背景下&#xff0c;智慧园区作为一种新型的城市发展模式&#xff0c;引起了越来越多的关注和探索。 什么是智慧园区&…

天若OCR 识别 (本地文字识别转换工具)

前言 天若OCR文字识别本地版是一款在天若OCR文字识别工具v5.0免费开源版的基础上采用Chinese-lite框架和Paddle-ocr框架本地化识别接口编译而成,无需联网也无需申请密钥&#xff0c;纯本地运算&#xff0c;识别准确度和速度很快&#xff0c;操作和天若OCR免费版一样&#xff0…

如何将短信从 iPhone 传输到计算机 - 5 种灵活的方式

概括 与他人交流的多种方式之一是发送短信。对于那些包含珍贵回忆或重要信息的消息&#xff0c;您需要将它们发送到另一台设备&#xff08;例如计算机&#xff09;进行备份。将短信文件发送到计算机是保存宝贵数据的最佳方法之一。继续阅读本文&#xff0c;了解如何将短信从 i…

gitlab将本地文件项目上传至gitlab服务

打开gitlab网页界面&#xff0c;登陆管理员账号 &#xff08;测试服务器安装的gitlab&#xff0c;浏览器输入ip或配置的gitlab地址&#xff09; 创建新项目 使用gitlab创建项目 创建一个新项目&#xff08;忽略分组&#xff09; &#xff08;忽略分组&#xff09; 在创建工…

决策树算法实战

本实战主要目标是讲解如何使用sklearn库来构造决策树&#xff0c;包括其中的一些参数的使用&#xff0c;以及参数调优对模型精确度的影响。 1. 数据处理 导入Pandas和Matplotlib两个库。 # 导入Pandas和Matplotlib两个库 %matplotlib inline import matplotlib.pyplot as pl…

动态规划part02 Day42

LC62不同路径 LC63不同路径II(超时10min) 超时原因分析&#xff1a;思路想错了&#xff0c;即便是正确思路初始化也有点问题&#xff0c;应该将不必要的判断逻辑引入初始化的过程中初始化&#xff1a; 从左上角到[i][0]和[0][j]都只有一条路径dp[i][0]1和dp[0][j]1引入故障&am…

URL跳转

1.URL介绍 开放重定向&#xff08;Open Redirect&#xff09;&#xff0c;也叫URL跳转漏洞&#xff0c;是指服务端未对传入的跳转url变量进行检查和控制&#xff0c;导致诱导用户跳转到恶意网站&#xff0c;由于是从可信的站点跳转出去的&#xff0c;用户会比较信任。 2.URL跳…

监控云安全的9个方法和措施

如今&#xff0c;很多企业致力于提高云计算安全指标的可见性&#xff0c;这是由于云计算的安全性与本地部署的安全性根本不同&#xff0c;并且随着企业将应用程序、服务和数据移动到新环境&#xff0c;需要不同的实践。检测云的云检测就显得极其重要。 如今&#xff0c;很多企业…

公司预防文件泄密的常见手段 | 文件防泄密软件推荐排行榜

在当今信息化社会&#xff0c;企业面临着越来越多的文件泄密风险。为了保护企业的核心信息和资产&#xff0c;公司需要采取一系列手段来预防文件泄密。本文将介绍公司预防文件泄密的常见手段&#xff0c;并推荐五款优秀的防泄密软件&#xff0c;帮助企业构建更为严密的数据安全…

二零二四充能必读 | 618火热来袭,编程书单助你提升代码力

文章目录 &#x1f4d8; Java领域的经典之作&#x1f40d; Python学习者的宝典&#x1f310; 前端开发者的权威指南&#x1f512; 并发编程的艺术&#x1f916; JVM的深入理解&#x1f3d7; 构建自己的编程语言&#x1f9e0; 编程智慧的结晶&#x1f31f; 代码效率的提升 亲爱的…

VUE3+TS+elementplus+Django+MySQL实现从数据库读取数据,显示在前端界面上

一、前言 前面通过VUE3和elementplus创建了一个table&#xff0c;VUE3TSelementplus创建table&#xff0c;纯前端的table&#xff0c;以及使用VUE3TSelementplus创建一个增加按钮&#xff0c;使用前端的静态数据&#xff0c;显示在表格中。今天通过从后端获取数据来显示在表格…

学习信号和槽(1)

信号和槽函数 一、了解信号和槽的概念二、信号和槽的使用2.1、第一种方法2.2、第二种方法2.3、第三种方法2.4、第四种方法2.5、第五种方法 一、了解信号和槽的概念 信号&#xff08;Signal&#xff09;&#xff1a;就是在特定条件下被发射的事件&#xff0c;比如QPushButton 最…

美国西储大学(CRWU)轴承故障诊断——连续小波(CWT)变换

1.数据集介绍 2.代码 import random import matplotlib matplotlib.use(Agg) from scipy.io import loadmat import numpy as npdef split(DATA):step = 400;size = 1024;data = []for i in range(1, len(DATA) - size, step):data1 = DATA[i:i + size]data.append(data1)rand…

内网穿透初步探索实践

内网穿透初步 正常来说两台Linux设备只有在同一局域网下才可以进行互相的ssh远程登录 那么如果不在一个网段下&#xff0c;比方说一台在家里连着家里的WIFI&#xff0c;一台在学校连着实验室的WIFI&#xff0c;这种情况要想实现ssh远程登录则需要用到内网穿透 这就需要用到一…