第一章：Vue中实践样式文件复用（模块化导入）

说明： 通常项目中复用的样式值（变量）和样式段（mixin）会统一放在一个.scss文件中（common.scss）供项目使用，主要来学习common.scss文件的使用

组件中使用
在组件的scss文件中直接导入，属于谁用谁引：

@import '../assets/style/common.scss'

全局中使用
秉着懒的原则，对于这些高度复用的东西，能一次搞定自然是最好的：

// 在main.js中引入全局样式
import './assets/style/common.scss'

然后在组件中去引用，成功的报错了！！！（这种注册方式适用于普通样式）

解决方案：
不用再main.js中引入了，直接利用vue.config.js来配置
报错解决方案一：创建 vue.config.js 文件，写入如下代码：

module.exports = {css: {loaderOptions: {// 给 sass-loader 传递选项sass: {// @/ 是 src/ 的别名prependData: `@import '~@/assets/style/common.scss';` //新版本}},}
}

采用第1种方法的时候要注意因为它会在所有 sass 文件里添加相同的代码。如果添加的不是变量, mixin 之类的，而是类似下面的代码的话。假设你有20个scss文件的话，下面这段代码就会出现在你最终打包出来的文件20次。
参考：https://blog.csdn.net/weixin_41615439/article/details/104216159

大概的意思是项目自己帮你在每个scss文件中添加你的common.scss代码，建议你只写一些共用的变量和mixin，不要包含普通的样式，不然会在编译后的文件中重复出现。

只有变量的

既有变量，还有普通样式的

可以看见div重复了两次，这种普通样式要全局通用公有，应该单独写在一个 default.scss 文件中，然后全局引入，下图的 div 样式就不会重复了

// main.js 中全局注册默认公用样式
import './assets/style/default.scss'

结论：定义变量和mixin的 scss 单独放在一个文件夹，在vue.config.js中设置后，可全局使用变量和mixin

报错解决方案二：

利用 sass-resources-loader 插件，

npm i sass-resources-loader -D

创建 vue.config.js 文件，写入如下代码：

module.exports = {chainWebpack: config => {const oneOfsMap = config.module.rule('scss').oneOfs.storeoneOfsMap.forEach(item => {item.use('sass-resources-loader').loader('sass-resources-loader').options({// Provide path to the file with resourcesresources: 'src/assets/style/common.scss',//文件的路径// Or array of paths// resources: ['./path/to/vars.scss', './path/to/mixins.scss']}).end()})}
}

与第一种不同，它是将文件中变量和mixin注册到了全局（注意依旧不要写普通样式）

第二章：变量定义和使用

/* $变量名：值 */
$themeColor: red;/* 使用 */
div{background-color: $themeColor;
}

第三章：@mixin混入和@include引入混入

样式代码段的复用，将复用的代码段定义后引入使用：

@mixin name { property: value; property: value; … }

/* 定义混入 */
@mixin my-flex-center{display: flex;justify-content: center;align-items: center;
}/* 使用混入 */
div{@include my-flex-center;background-color: red;
}/* 编译后 */
div{display: flex;justify-content: center;align-items: center;background-color: red;
}

混入可以接收参数：

@mixin bordered($width, $color){border:$width solid $color;
}div{@include bordered(1px, red);
}/* 编译后 */
div{border: 1px solid red;
}

指定默认值：可以都指定，也可以指定其中的几个

@mixin bordered($width: 1px, $color: red){border:$width solid $color;
}div{@include bordered(,red); /* 错误的，如果你只想传某些个参数应该指定它，其他的会默认 */@include bordered（$color: green） /* 此时$width会取默认值1px*/
}

可变参数（类似arguments）

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 … 来设置可变参数。例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。

@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

继承 @extend

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.item{position: absolute;
}
.item1{@extend .item;color: red;
}
.item2{@extend .item;color: green;
}/* 编译后 */
.item, .item1, .item2 {position: absolute;
}
.item1{color: red;
}
.item2{color: green;
}

好像用继承没有省太多的代码如下少写一些重复class
使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class=“item item1” ，只需要设置 class=“item1” 类就好了。

Mixins允许我们在项目中复用样式片段，可以传递参数这个特性使得它们非常灵活，强大。同样，我们也可以使用@extend命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixin和extend好像做了同样的事情，那我们应该选择哪一个呢？
@mixin主要的优势就是它能够接受参数。如果想传递参数，你会很自然地选择@mixin而不是@extend。
如果没有任何参数，使用@extend来创造DRY应该是个不错的选择。不过要注意的是，使用gzip压缩过的文件可能会破坏代码中的DRY。
在大作数情况下@mixin会比@extend更好，但是它们俩都有自己的一席之地。当样式和选择器之间的关系在某些方面比较紧密的时候，使用@extend。除此之外，你可以使用@mixin在任何地方。

官网原话意思就是告诉你尽可能(直接使用混入不会有错的)的使用@mixin

sass学习记录及vue实践相关推荐

Flutter学习记录——29.完整实践——实现一个简易日记本应用
文章目录 1.知识整理 2.项目实现 2.1 效果展示 2.2 项目概览 2.3 代码实现 2.3.1 引导页的实现 2.3.2 应用首页 2.3.3 第一个页面 2.3.4 时间工具类 2.3.5 ...
Vue学习记录三 --- vue的项目实战
一.常规项目配置安装: 1.安装vue-router路由: cmd下在当前项目目录下执行 : npm install vue-router --save-dev 如果因为依赖安装失败,则执行 : np ...
学习记录492@vue全局事件总线
适用于复杂的组件之间的通讯,需要一个全局的东西,作用为中间件,其他组件对这个全局的东西注册一个事件,其他组件要通讯就触发这个全局东西的事件就可以了. 如A要接收B的数据,找到一个全局的X,A中给X绑定 ...
【YAML】【YAML的实践】【YAML的使用学习记录】
[YAML][YAML的实践][YAML的使用学习记录] 0 前言 1 YAML的使用 1.1 `.yaml`配置文件 1.1.1 配置文件说明 1.1.2 举例说明 1.2 函数中使用 1.2.1 ...
【Eigen】【Eigen实践】【Eigen的使用学习记录】
[Eigen][Eigen实践][Eigen的使用学习记录] 0 前言 1 Eigen使用 1.1 头文件的使用 1.2 定义和初始化 1.2.1 定义n*m矩阵 1.2.2 定义n*1向量 1.2. ...
【ceres】【ceres实践】【ceres的使用学习记录】
[ceres][ceres实践][ceres的使用学习记录] 0 前言 1 下载安装ceres 2 ceres使用 2.1 头文件的使用 2.2 CMakeLists.txt的使用 2.3 代码的使用 ...
【VUE】学习记录一
[VUE]学习记录学习视频为:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 1.查询vue知识点: https://v2.cn.vuejs.org/ 2. 下载和引入 2.1 下 ...
【Opencv】【OpenCV实践】【OpenCV的使用学习记录】【fmt学习记录】
[Opencv][OpenCV实践][OpenCV的使用学习记录][fmt学习记录] 0 前言 1 opencv使用说明 1.1 头文件的使用 1.2 CMakeLists.txt的使用 1.3 代码 ...
vue学习记录-05 事件监听
vue学习记录-05 事件监听这篇文章是根据codewhy老师在b站的视频进行的学习记录文章目录 vue学习记录-05 事件监听一.v-on的基本使用二.v-on的参数问题 1.方法不需要参数 ...

sass学习记录及vue实践

第一章：Vue中实践样式文件复用（模块化导入）

第二章：变量定义和使用

第三章：@mixin混入和@include引入混入

sass学习记录及vue实践相关推荐

最新文章

热门文章