sass scss
10scss的引入
10.06 1.npm（node的包管理器） npm i name -g（全局安装的）-s（加与不加的效果一样）-d（局部安装）npm install/uninstall/update 2.vite.config.js里配置 css: { // css预处理器 preprocessorOptions ......
Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
问题描述 在写组件样式的时候，普通样式都没问题，一碰到$变量就error Module build failed (from ./node_modules/sass-loader/dist/cjs.js): color: $normal-active-color; ^ Undefined varia ......
sass_scss_less
title: Sass(Scss)、Less的区别与选择 + 基本使用 tags: [CSS, Sass, Scss, Less] categories: 可回收物 keywords: css,sass,scss,less description: Sass(Scss)、Less的区别与选择+基本使 ......
解决：sass-loader@6.0.6 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
参考：https://blog.csdn.net/hancoder/article/details/113821646 去https://github.com/sass/npnode-sass 或者 https://github.com/sass/node-sass/releases 都可以看到no ......
sass 系统性学习
学习随笔（Sass） 该随笔是根据b站小满zs的Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的视频学习写的，Vue3 + vite + Ts + pinia + 实战 + 源码 +electron bem格式 类名中--代表，这个类的样式一样，仅颜色不一样 ......
yarn install error node-sass: Command failed.
运行yarn install报错，如下图： 运行npm install也报错，如下图： 如果发生上诉的错误，建议优先考虑是node.js的版本问题 我的node.js版本是16，卸载16，安装14版本，运行不再报错 ......
Error Node Sass does not yet support your current environment Windows 64-bit with Unsupported runt
## Error: [Node](https://so.csdn.net/so/search?q=Node&spm=1001.2101.3001.7020) Sass does not yet support your current environment: Windows 64-bit with ......
vue项目中全局引入cass（scss）变量和sass（scss） mixin
1、使用场景 variable.scss文件样例 // 颜色定义规范$color-background: #222;mixin.scss文件样例 // 背景图片@mixin bg-image($url) { background-image: url($url + "@2x.png"); @medi ......
sass-loader以及node-sass版本问题造成启动项目失败
Syntax Error: ValidationError: Invalid options object. Sass Loader has been报错解决方法解决方法是：更新sass-loader以及node-sass的版本。安装命令：npm install sass-loader+版本 npm ......
使用 docker 打包构建部署 Vue 项目，一劳永逸解决node-sass安装问题
> 文章源于 Jenkins 构建 Vue 项目失败，然后就把 node_modules 删了重新构建发现 node-sass 安装不上了，折腾一天终于可以稳定构建了。 > 犹记得从学 node 的第一天，就被 node-sass 折磨了一整天，后面本地没问题了然后服务器开始折磨了，这次又遇到，尝试 ......
vscode 报错 ：Internal server error: Preprocessor dependency "sass" not found. Did you install it?
原因：内部服务器错误：未找到预处理器依赖项“sass”。 你安装了吗？ 解决： 其一、安装 sass 依赖命令 命令 ：npm install --save-dev sass ......
前端命令——编译文件ts scss sass 等
## 1. 安装 ```bash npm install -g typescript ``` ```bash tsc --initÏ ``` ## 2. 使用方法 ### 2.1、将ts文件转化为js ```bash tsc index.ts ``` 会自动生成对应的index.js文件 ### 2 ......
webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理
## webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理 - 现实问题: 为了编写博客园的博客样式, 我写了一个scss文件, 但是因为博客园的样式编辑里只接受css样式, 所以乘此机会顺便复习一下webpack5实现对scss(sass)文件的处理 ......
SASS/SCSS预处理器的高级特性和应用案例
SASS/SCSS是一种CSS预处理器，它可以简化CSS的编写和维护工作，并且提供了许多高级特性和功能。本文将介绍SASS/SCSS的一些高级特性和应用案例。 ![SASS/SCSS预处理器的高级特性和应用案例](https://img2023.cnblogs.com/blog/3261805/20 ......
关于less、scss声明变量、继承
less 继承得属性要放在最外面不然找不到 用@名字声明变量 scss 继承得属性可以放在里面，也可以放在外面 用$名字声明变量 ......
vite中导入全局样式变量（less、sass）
1、先新建vars.less文件，定义基础样式变量2、在vite.config.ts 下添加配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from "path"; // ......
node-sass安装依赖失败
报错如下： npm ERR! gyp info it worked if it ends with ok npm ERR! gyp verb cli [ npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe', npm ERR! gyp ......
node14 升级 node16 后 vue2 项目中 sass 报错问题
起因 不知道因为个什么手贱把之前的 node14 版本卸载了去官网重新下载安装了一下 node，最近版本升级到了 node16，以为应该不会有什么问题吧，结果把项目一跑，我勒个去，一堆飘红的，看控制台提示主要是这个 node-sass 报的错。 # 卸载 npm uninstall node-sas ......
在vite中使用sass
### 简介 sass提供了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，强化了css的功能，编写css更便捷，功能更强大 ### 使用 1. 安装sass 以前用vue-cli的时候，还要安装sass- ......
less 和 sass 的区别
# 一、编译环境不同? ``` (1) less是通过js编译 在客户端处理 (2) sass是通过ruby编译 是在服务器端处理 ``` # 二、变量符不一样 ``` (1) less是使用@，sass是使用 $ ``` # 三、使用方法 ``` sass支持条件语句，可以使用if{}else{} ......
node-sass 安装失败 Command failed 报错 node_modules\node-sass: Command failed. Exit code: 1
通过yarn install安装依赖包node-sass时总是报错， "../node_modules\node-sass": Command failed. Exit code: 1 具体的错误原因为 当前使用的node版本与依赖的node-sass版本不匹配 具体对应关系如下： NodeJS S ......
hubildx配置scss编译
插件市场安装好sass后打开hbuildX:如下操作，找到这个文件位置修改对于文件属性即可。 "--output-style", "compressed" 含义是：生成的CSS文件为压缩风格。 "onDidSaveExecution": true 含义是：当保存SCSS文件的时候，就会自定编译成CS ......
Sass的函数整理汇总
#### **说明** Sass 定义了各种类型的函数，这些函数可以通过 css 语句直接调用。可以看到Sass的函数功能已经相当丰富了。整理了Sass的主要函数，重点在于后面的颜色函数，设计非常的银杏！ #### **String(字符串) 函数** ##### **1、quote(string) ......
scss 常用操作
# scss 使用说明 ### 1、变量声明 variables ```scss $my-color: #1269b5; // 定义变量 $my-border: 1px solid $my-color; // 变量中也可以使用变量 div.box { background: $my-color; } ......
2.sass
1. 变量：$ //1.常规 $myColor:red; .first{ color:$myColor; } //2.局部作用域 .second{ $myColor:red; color:$myColor; } //3.全局作用域 .third{ $myColor:red !global; colo ......
vue lang="scss" scoped 样式穿透的规则
1：外层容器 ::v-deep 组件 { }2： ::v-deep 组件 { }3： ::v-deep { & 组件{ } } ......
Scss 列表逐一淡出效果
# 界面结构 ```html file:MenuList.vue/template 回到顶部 我的标签 随笔分类 文章分类 随笔归档 文章归档 我的相册 我的日历 ``` 这里通过一个布尔变量控制 class `close-menu-body` 和 `open-menu-body` 之间的切换。 这 ......
css颜色变淡和变浅方法收集(模拟sass的darken和lighten函数)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ......
SASS(scss)
# Scss ## 1.认识Scss > Sass 支持两种不同的语法，每个都可以加载另一个。 scss其实是`Sass`的一种语法。SCSS 语法使用`.scss`文件扩展名 。除了一些小的例外，它是CSS的超集，这意味着**基本上所有有效的CSS也是有效的SCSS**。 `scss`示例： `` ......
node-sass安装问题
工作中用的vue 2搭建前台，写sass样式时遇到问题：node-sass找不到， 网上的大多数内容都是让你用淘宝cnpm下载node-sass和sass-loader，但还是存在项目报错的情况，这里是我踩坑的记录，希望能提供些帮助。 1. 查看npm源：npm config get registr ......