详解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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中import与@import的区别及使用场景说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在最近一个项目的后台管理系统中，写前端界面时用到了ElementUI，但是发现导入数据表格之后表头的高度一直很高，那么如何解决，本文就来详细的介绍一下2021-09-09
今天小编就为大家分享一篇vue实现将一个数组内的相同数据进行合并，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了antd Form组件表单在vue3中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
VUE跨域问题Access to XMLHttpRequest at
今天发现一个错误，VUE发送请求的时候不能请求到正确数据，VUE跨域问题Access to XMLHttpRequest at，本文就详细的来介绍一下解决方法，感兴趣的可以了解一下2022-05-05
这篇文章主要为大家详细介绍了IntelliJ IDEA编辑器配置vue高亮显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
VuePress在build打包时window document is not defined问题解决
这篇文章主要为大家介绍了VuePress在build打包时window document is not defined问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
图表在我们的项目中可以帮我们很明确的看到我们想要看到的数据，本文将主要介绍Echart图表在项目中前后端使用的详细教程，感兴趣的同学可以学习一下2021-11-11
最近在vue3项目中通过three.js实现了实际的三维效果demo,下面这篇文章主要给大家介绍了关于在vue中使用three.js的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论