何为scoped？在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。scoped的实现原理vue中的scoped属性的效果主要通过P
转载
2024-03-27 14:19:48
264阅读
前言在日常的Vue项目开发过程中，为了让项目更好的维护一般都会使用模块化开发的方式进行。也就是每个组件维护独立的template，script，style。主要介绍一下使用<style scoped>为什么在页面渲染完后样式之间并不会造成污染。示例搭建一个简单的Vue项目测试一下：终端执行npx webpack输出dist目录，在浏览器打开index.html调试一下看看现象：每个组件
目前最主流的CSS预处理器：Sass(SCSS)(基于Ruby)、LESS(基于NodeJS)、Stylus Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量、嵌套、混合、导入等高级功能。使用Sass以及Sass的样式库(如Compass)有助于更好地组织管理样式文件，以及更高效地开发项目 特色功能完全兼容CSS3在CSS基础上增加变量、嵌套、混合等功能通过函数进行颜色值与
转载
2024-08-14 21:24:36
351阅读
属性和选择器嵌套是非常伟大的特性，因为他们不仅仅减少了你的编写量，而且通过视觉上的缩jinx使编写的样式结构更加清晰，更易于阅读个开发。原生的css导入 原生的css的@import规则允许在一个css文件中导入其他css文件。但这样执行到@import时，浏览器才会执行其他的css文件，导致页面加载起来特别慢。 sass 的@import规则，在省城css文件时就把相关文件导入进来。这就意味着所
vue安装node-sass编译报错安装node-scss报错安装node-scss报错在搭建vue脚手架 或者是在vue项
转载
2022-08-04 10:49:27
183阅读
原创
2022-07-06 12:22:40
97阅读
要如何在我们的vue项目中全局引入scss文件呢？main.js可以直接import css文件，而不可以直接import scss文件。 在index.html中link引入的话，不起作用。 公共样式可以写在app.vue这个父组件的style标签中，这样我们写的子组件就能继承这些公共样式，但是！！！我们自定义的scss的变量继承不了！！如果我们想使用公共的scss样式变量...
转载
2022-05-26 16:48:36
2898阅读
1、 什么是CSS预处理器CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。2、lang因此lang的属性可选：scss（sass）、less等等即：<style lang
转载
2024-05-17 08:05:19
293阅读
目前写过的大多数项目都是cli搭建的, 拿一个简单的项目结构来详细说一下每个目录的作用.首先创建一个项目需要安装cli, 命令行全局npm安装即可npm install -g @vue/cli然后创建一个项目 cli2与cli3的命令是不同的 (project-name就是你的项目名称)vue create project-name // vue-cli3
vue init webpack
转载
2024-09-30 18:06:30
55阅读
SASS(语法上很棒的样式表)是由Hampton Catlin设计的样式表语言，由Chris Eppstein和Natalie Weizenbaum开发。它是一种预处理器脚本语言，将被编译或解释为CSS。SassScript本身就是一种脚本语言。它的打字规则是动态的。SCSS通常被称为Sassy CSS，它是作为SASS(语法上很棒的样式表)的主
转载
2024-04-02 00:02:44
276阅读
vue事件处理小结事件监听可以使用v-on指令监听DOM事件来触发javascript代码。事件监听的好处？ 所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：扫一眼HTML模板便能轻松定位在Javascript代码里对应的方法因为你无须在Javascript里手动绑定事件，你的ViewMo
转载
2024-06-20 20:52:43
31阅读
首先了解一下sass的知识：sass是一种对css的一种提升，可以通过编译生成浏览器能识别的css文件。sass技术的文件的后缀名有两种形式：.sass和.scss。这两种 ...
转载
2021-07-25 15:28:00
2549阅读
npm install sass-loader node-sass --save-dev
原创
2022-05-30 11:58:08
1067阅读
一、安装sass 依赖包 npm install sass-loader --save-dev
npm install node-sass --sava-dev二、在build文件夹下的webpack.base.conf.js的rules里面添加配置{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}但是！！vue-cli脚手架已
转载
2023-12-09 11:19:35
554阅读
前言today，is good day，中午吃了个农民工外卖，有点撑，想在床上躺会，TMD，睁开眼天黑了，别说，冬天的上海天黑的挺早，基本上五点半就已经全黑了，住在出租屋的我，却感觉不到上海的灯火通明，繁华，毕竟在我们这些人的眼里，上海是有钱人的上海，它的繁华、它的璀璨与我无关，我只不过是外地过来讨饭的！回归正题吧！我们在写VUE的时候，会使用scss，也会做一些通用样式，方便使用，在写好的通用样式的时候，每次都要单文件导入，刚开始写的时候，感觉还好，后面工程量大了后，就显得麻烦，那么本文就全局导入scs
原创
2022-12-01 17:20:58
409阅读
Sass 是一种 CSS
原创
2023-05-13 09:01:22
111阅读
前天下载了个vue移动端的demo(大家也可以学习一下：https://github.com/toutouping/vue-case)，先是运行了cnpm install ；再运行了npm run dev ；然后就报了下面的错误： 对于刚进入编程领域的我来说，一看到这种报错，第一反应就是应该是scss没有安装，打开代码发现，demo里面果然用了scs
报错： Failed to compile../src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modul ...
转载
2021-09-14 10:39:00
1247阅读
2评论
### 实现Vue中SCSS全局变量的步骤
在Vue项目中使用SCSS全局变量可以帮助我们更方便地管理样式，提高样式的复用性和维护性。下面是实现Vue中SCSS全局变量的步骤及代码示例：
#### 步骤一：安装SCSS处理器
首先确保你的Vue项目已经安装了SCSS处理器，如果没有可以使用以下命令安装：
```bash
npm install sass sass-loader -D
```
原创
2024-05-29 10:09:32
403阅读
在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。 这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。 我们可以使用 >>> 或 /deep/ 解决这一问题:外层 >>> .el-checkbox {
display: block;
fo
转载
2021-05-10 20:31:21
380阅读
2评论
