详解Vue 全局引入bass.scss 处理方案
更新时间：2018年03月26日 15:36:45 作者：Bboy_2016
本篇文章主要介绍了详解Vue 全局引入bass.scss 处理方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
为解决在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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
这篇文章主要为大家详细介绍了vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
随着前端技术的发展,TypeScript 已经成为了许多开发者的首选语言之一,因为它提供了静态类型检查,可以帮助开发者在编写代码阶段就发现错误,本文将详细介绍如何在 Vue 3 中配置 TypeScript,需要的朋友可以参考下2024-10-10
这篇文章主要为大家详细介绍了vue或css动画实现列表向上无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
vue项目使用luckyexcel预览excel表格功能(心路历程)
这篇文章主要介绍了vue项目使用luckyexcel预览excel表格,我总共尝试了2种方法预览excel,均可实现,还发现一种方法可以实现,需要后端配合,叫做KKfileview,本文给大家介绍的非常详细,需要的朋友可以参考下2023-10-10
今天小编就为大家分享一篇vue 监听屏幕高度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
el-form表单el-form-item label不换行问题及解决
这篇文章主要介绍了el-form表单el-form-item label不换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue实现聊天框自动滚动的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Vue路由history模式解决404问题的几种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue input输入框中的值如何变成黑点问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论