详解Vue 全局引入bass.scss 处理方案
作者:Bboy_2016 时间:2024-06-05 10:03:08
为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器。
安装
$ > cnpm i -D sass-resources-loader
配置
配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css、less的解析方式,具体如下。
// build/utils.js
exports.cssLoaders = function (options) {
options = options || {}
...
return {
// ...
sass: generateLoaders('sass', { indentedSyntax: true }),
// 定义在这里 =======================》
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/common/style/global.scss') // 需要全局引入的文件
}
}
),
// 定义在这里 =======================》
// ...
}
}
// global.scss
@mixin line-height($height) {
height: $height;
line-height: $height;
}
$head-height: .45rem;
// xx.vue
<style lang="scss">
height: @include line-height(45px);
</style>
建议
在 global.scss 中只需要定义变量 或者是 mixins (混合)。
参考
https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html
来源:https://www.jianshu.com/p/73a156610c18
标签:vue,全局引入,scss
0
投稿
猜你喜欢
聊聊MySQL中的参数
2024-01-24 20:47:01
Python数据分析之使用scikit-learn构建模型
2023-11-10 23:19:10
用python 绘制茎叶图和复合饼图
2023-08-04 10:34:54
Python实现京东秒杀功能代码
2021-08-14 15:41:27
Python工程师面试必备25条知识点
2023-10-31 00:30:53
mysql主键id的生成方式(自增、唯一不规则)
2024-01-14 20:20:27
一文带你感受Go语言空结构体的魔力
2024-05-05 09:30:15
Python 4种实现定时任务的方案
2021-12-12 18:08:27
Django 多环境配置详解
2022-01-25 06:38:49
Dreamweaver4使用技巧之--为你的站点定做颜色
2010-09-05 21:12:00
来自腾讯的一个不固定高度得消息的滚动特效
2024-04-17 10:19:34
mysql8.0.21下载安装详细教程
2024-01-26 15:40:00
Django使用channels + websocket打造在线聊天室
2022-01-05 11:16:26
Python全局变量关键字global的简单使用
2022-01-29 11:03:49
Python中的fileinput模块的简单实用示例
2023-06-19 01:09:27
MySql常用操作SQL语句汇总
2024-01-21 00:11:53
MySQL的id关联和索引使用的实际优化案例
2024-01-26 03:43:30
Python群发邮件实例代码
2021-05-05 18:42:35
后台程序开发常用jQuery插件
2010-04-06 12:11:00
Python文件遍历os.walk()与os.listdir()使用及说明
2022-11-10 21:53:36