vue如何引入sass全局变量

 更新时间:2018年06月28日 08:30:20   作者:摸路  
sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,这篇文章主要介绍了vue引入sass全局变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的效果,但是在vue-cli搭建的项目中,在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。

傻瓜式引用

在每个用到全局变量的组件都引入该全局样式文件

@import 'path/fileName.scss'

但是组件或者页面不在统一层目录下,引入的路径可能也会有差异,所以还是看看 sass-resources-loader 的解决方法吧。

sass-resources-loader引入sass全局变量

sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以,可以使用共享变量和混合所有SASS样式,而不去每个文件都引用。

安装sass-resources-loader

npm install --save-dev sass-resources-loader

修改sass配置

build 文件夹下找到 util.js 修改sass编译器loader的配置

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
 return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: [resolveResource('common.scss')] 
   }
  }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

修改sass配置的调用为 generateSassResourceLoader()

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // vue-cli默认sass配置
  // sass: generateLoaders('sass', { indentedSyntax: true }), 
  // scss: generateLoaders('sass'),
  // 新引入的sass-resources-loader
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

main.js 中引用 common.scss 文件,重启服务,其中定义的变量在其他组件就可以使用了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue Nprogress进度条功能实现常见问题

    vue Nprogress进度条功能实现常见问题

    这篇文章主要介绍了vue Nprogress进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条,本文通过实例代码给大家讲解,需要的朋友可以参考下
    2021-07-07
  • vue监听键盘事件的快捷方法【推荐】

    vue监听键盘事件的快捷方法【推荐】

    这篇文章主要介绍了vue监听键盘事件的快捷方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Element-ui DatePicker日期选择器基础用法示例

    Element-ui DatePicker日期选择器基础用法示例

    这篇文章主要为大家介绍了Element-ui DatePicker日期选择器基础用法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue实现动态显示textarea剩余字数

    Vue实现动态显示textarea剩余字数

    这篇文章主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue和js中实现模糊查询方式

    vue和js中实现模糊查询方式

    这篇文章主要介绍了vue和js中实现模糊查询方式,具有很好的参考价值,希望对大家有所帮助。也希望大家多多支持脚本之家
    2022-08-08
  • Vue Promise解决回调地狱问题实现方法

    Vue Promise解决回调地狱问题实现方法

    这篇文章主要介绍了Vue Promise解决回调地狱问题,总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路
    2023-01-01
  • vue使用Google Recaptcha验证的实现示例

    vue使用Google Recaptcha验证的实现示例

    我们最近的项目中需要使用谷歌机器人验证,所以就动手实现一下,本文就来详细的介绍一下vue Google Recaptcha验证,感兴趣的可以了解一下
    2021-08-08
  • vue cesium加载点与定位到指定位置的实现方法

    vue cesium加载点与定位到指定位置的实现方法

    Cesium是一个用于创建高性能、跨平台的3D地球和地图的开源JavaScript库,它提供了许多功能,包括地理空间数据可视化、地理定位和地图导航等,这篇文章主要介绍了vue cesium加载点与定位到指定位置,需要的朋友可以参考下
    2024-03-03
  • 详解vue中$nextTick和$forceUpdate的用法

    详解vue中$nextTick和$forceUpdate的用法

    这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • van-uploader保存文件到后端回显后端接口返回的数据

    van-uploader保存文件到后端回显后端接口返回的数据

    前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06

最新评论