首页 > TAG信息列表 > scss

Vue3 JS 与 SCSS 变量相互使用

JS 中使用 SCSS 变量。如在 scss 中定义了一个颜色,el-menu 组件使用该颜色作为背景色,此时需要获取 scss 变量,通过 background-color 属性将该变量值传递给 el-menu 组件(当然你也可以在 JS 中重新定义一个变量存储该颜色)。 SCSS 中使用 JS 变量。如动态换肤功能,用户选中某个颜色作

Vue配置scss匹配node-scss与sass-loader

1、node 版本、node-sass 版本及 sass-loader 版本查看: 其一、我的 node 版本查看:在命令行输入查询命令:node -v我的 node 版本为:v14.19.0其二、我的 node-sass 版本查看:"node-sass": "^4.14.1" 其三、我的 sass-loader 版本查看:"sass-loader": "^7.3.1" 2、node 版本

uniapp配置微信小程序的iconfont本地文件

一. 小程序使用本地iconfont的方案 小程序使用本地文件: 转base64或者使用线上环境 但是iconfont线上地址不允许了(有时候官方会没有的情况),只能用base64 二. 如果使用 1. 首先下载iconfont文件 2. 取出iconfont.css 取出iconfont.css 将iconfont.css变成iconfont.scss, 头部加入 /

vue 使用sass定义全局变量

一、安装以下依赖: npm i -D sass-loader@8.x -D npm i node-sass@4.14.1 -D npm i sass-resources-loader -D 二、新建文件:variables.scss $primary-color:#547fcd; $secondary-color:#6992dd; $text-blue-color:#648eda; $highlight-color:#7cffe2; 三、配置 vue.config.js:

2022.7.27 - Sass的注意点以及几个常用语法

安装 Sass 后,您可以使用 命令将 Sass 编译为CSS 。 例如,sass input.scss output.css从您的终端运行将获取一个 Sass 文件input.scss,并将该文件编译为output.css. 您还可以使用该 --watch标志查看单个文件或目录。watch 标志告诉 Sass 监视源文件的更改,并在每次保存 Sass 时重新编

jsx/tsx使用cssModule和typescript-plugin-css-modules

目录1,前言2,效果图3,如何使用3.1,安装3.2,配置4,示例5,插件错误处理5.1,错误触发原因5.2,解决办法 1,前言 在vite/webpack搭建的项目中,不管是vue还是react,都可以写jsx/tsx,为了避免样式污染,常用的方式有两种。一种是每个组件都用一个唯一类名class包裹,使用less/scss嵌套样式。另一种是使用cs

Sass文件名中的_有什么用

原文:Sass知识点之 —— @import 、Partials 与 @media:https://blog.csdn.net/q213546879/article/details/98956870 文件名前面的下划线作用, 比如_grid.scss 这时候编辑器不会自动编译这个文件,而只有当我们在另一个scss文件里引入这个文件之后,才会把这个文件里的内容编译到引入的

vue配置reset.scss和global.scss

reset.scss的目的是为了消除不同浏览器默认样式的不一致性。 global.scss规定了整个站点的公共样式、公共方法和公共参数等。 /* reset.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,

SCSS 实现换肤(二)

  使用 scss 换肤,之前写过一个版本的换肤方式 SCSS 实现换肤,这里记录下使用 scss 实现换肤的另一种方式。 实现 新建主题色的文件 theme.scss,里边是对应主题的颜色变量 //默认 :root-- { //菜单栏 --menuBg: red; //菜单栏背景 --menuText: #333; //菜单栏字

sass全局变量配置和使用示例

vue2.6 sass全局变量配置 安装sass-loader npm install sass-loader@8.0.2 --save-dev vue.config.js中配置 module.exports = { css: { loaderOptions: { sass: { prependData: `@import '@/assets/styles/variables.scss';` // 注意此处的 ; 不能少!

h5 页面设计长度,scss换算转化方法

h5 页面设计长度,宽度换算---设计图,宽度安装750px的标准来的 @function px2rem($px) { @return $px / 75px* 1rem; } rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。 https://www.cnblogs.com/yeminglong/p/14976670.ht

SCSS学习手册

scss 目录 基本用法 1.使用变量$ 2.默认变量值 !default 3.局部变量和全局变量 4.变量值类型 5.语法嵌套规则 ①选择器嵌套 ②父选择器 & ③属性嵌套 ④占位符选择器 %xxx 6.注释 7.SASS 导入@import @import 局部文件 嵌套 @import 混合指

scss如何编译成css?

Scss是Sass3版本当中引入的新语法特性,完全兼容css3的同时继承了Sass强大的动态功能。scss文件可以编译为css文件,下面我们来看一下将scss编译为css的方法。 我们可以使用node来将scss编译为css。下面我们来看一下使用node将scss编译为css的方法。 使用nodejs的npm包安装sass 1、安

vue css less sass scss 深度选择器 穿透 /deep/ ::v-deep >>> 的区别

1./deep/ 在vue3.0之前可使用,例如(复写样式前加/deep/),vue3.0及后使用就会报错 & /deep/ .el-input { width: 60px; } 2. ::v-deep 在vue3.0及后使用,替代/deep/ &::v-deep .el-input { width: 60px; } 3. >>> 只作用于css,对于less和scss不起作用,如果是less和scss的话

关于sass(scss)、less、postcss、stylus的简介与区别

为什么会出现css预处理器 ​ CSS不是一种编程语言,仅仅只能用来编写网站样式,在web初期时,网站的搭建还比较基础,所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级,css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量,常量以及其他的编程

vue3+ts项目引入ElementPlus并设置主题

1、介绍:vue3+ts项目引入ElementPlus的方式有几种,一个是完整引入,一个是官方推荐的自动导入,最后一个是手动导入 2、实操:这里展示前面两种,最后的手动导入不是很推荐,这里就不介绍了 2-1、完整引入,官方案例:element-plus-vite-starter 引入ElementPlus $ npm install element-plus --sa

webstorm 使用file Watcher 编译scss文件为 wxss

全局安装 sass npm install sass -g Arguments输入 $FileName$:$FileNameWithoutExtension$.wxss Output paths to refresh输入 $FileNameWithoutExtension$.wxss

vue3+vite配置全局scss

https://www.csdn.net/tags/MtTaEgzsMDY4MzA2LWJsb2cO0O0O.html https://blog.csdn.net/m0_67393413/article/details/123433867?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-123433867-null-null.pc

使用NPM Scripts打造简单的自动化构建工作流

1、使用NPM Scripts包装构建命令 (1)在package.json中添加“scripts”字段 package.json "scripts": { "build":"sass scss/main.scss css/style.css" }, 添加完后完整的是下面这个样子的   { "name": "scss", "version":

(未解决)main.ts中引入scss报错 (vue3+typescript+@vue/cli5+系列问题总结)

问题描述: 安装sass、sass-loader,vue.config.js中配置对应的scss文件路径。可以正常使用。但是如果在main.ts中引入,则会报错。   当前问题目前还未找到原因.....     项目技术栈: 脚手架:@vue/cli 5.0.4 vue:vue 3.2.13 typescript:4.5.5 sass:1.32.7 sass-loader:12.0.0 1、vue/cli5+

重学前端 - react-第二节: 添加ts + scss

重学前端 - react: 添加ts + scss 简介: 上一节我们新建了 react 项目。项目中并没有使用 ts + scss. 现在我们为项目添加 ts + scss。是项目后期维护更加方便,也为他团队提供书写规范。 安装 typescript 相关 module npm install --save typescript @types/node @types/react @typ

vue项目中引入scss全局变量的多种姿势

vue项目中引入sass全局变量的多种姿势 现在脚手架里几乎都集成了less、sass,使用变量的时候,可能都会有如何引入的疑惑,今天就整理一些方式,供大家学习了解。 本文已sass项目为例 局部引入变量文件 虽然日常开发中很少有这种需求,但是也是可以的,就是在你需要的模板引入变量文件即可在

scss 中的指令@import 、@media 、@extend、@mixin 、@include、 占位符%

一、@import   @import 的功能,允许其导入 scss 或者sass 文件。被导入的文件将合并编译到同一个 css 文件中,另外,被导入的文件中所包含的变量或者混合指令(mixin) 都可以在导入的文件中使用。     通常,@import 寻找sass 文件并将其导入,但在以下情况下,@import 仅作为普通的css

uniapp scss实现滑块

.box{  position:relative;  }.glider{ position: absolute; bottom: 0rpx; left: 0; width: 50%; height: 6rpx; border-radius: 3rpx; display: flex; align-items: center; justify-content: ce

scss 速记

CSS 功能拓展 嵌套 #main p { color: #00ff00; .redbox { color: #000000; } } 属性嵌套 个人基本没怎么用过。 .funky { font: { family: fantasy; size: 30em; weight: bold; } } 父选择器 & a { font-weight: bold; &:hover { text-decor