首页 > 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