vue-cli配置全局sass、less变量的方法

 更新时间:2019年06月06日 11:18:27   转载 作者:敏小静  
这篇文章主要介绍了vue-cli配置全局sass、less变量的方法,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

一、全局配置less

1.下载插件

**vue add style-resources-loader**
vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的, yarn源的问题有可能导致失败。如果上面安装失败的话,就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader(前提是已经安装过 less less-loader)
// 没有出错的话,可以无视这里
 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
 或 
 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
**

第二步配置vue.config.js


const path = require("path");
  module.exports = {
   ...
   pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
       //这个是加上自己的路径,
       //注意:试过不能使用别名路径
       path.resolve(__dirname, "./src/assets/variable.less")
       ]
     }
   }
   ...
  }

或者使用官网的自动导入在chainWebpack中引入

https://cli.vuejs.org/zh/guid...

二、全局配置sass(直接配置vue.config.js)

注意:官网独爱sass,这种loader的形式只有sass才合适用,其他的(less、stylus)都会报错。

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
       // @是src的别名
       data: `
        @import "@/assets/variable.scss";
       `
      }
    }
  }
  ...
 }

总结

以上所述是小编给大家介绍的vue-cli配置全局sass、less变量的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • Vue项目使用CDN优化首屏加载问题

    Vue项目使用CDN优化首屏加载问题

    这篇文章主要介绍了Vue项目使用CDN优化首屏加载问题,本文以vue、vuex、vue-touter为例,给大家介绍处理流程,需要的朋友可以参考下
    2018-04-04
  • vue resource发送请求的几种方式

    vue resource发送请求的几种方式

    这篇文章主要介绍了vue resource发送请求的几种方式,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue2实现搜索结果中的搜索关键字高亮的代码

    vue2实现搜索结果中的搜索关键字高亮的代码

    这篇文章主要介绍了vue2实现搜索结果中的搜索关键字高亮的代码,需要的朋友可以参考下
    2018-08-08
  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 跟混乱的页面弹窗说再见

    跟混乱的页面弹窗说再见

    这篇文章主要介绍了跟混乱的页面弹窗说再见,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解Vuejs2.0 如何利用proxyTable实现跨域请求

    详解Vuejs2.0 如何利用proxyTable实现跨域请求

    本篇文章主要介绍了Vuejs2.0 如何利用proxyTable实现跨域请求,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue-router 学习快速入门

    vue-router 学习快速入门

    本篇文章主要介绍了vue-router 学习快速入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Vue-CLI与Vuex使用方法实例分析

    Vue-CLI与Vuex使用方法实例分析

    这篇文章主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下
    2020-01-01
  • VueJS全面解析

    VueJS全面解析

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。这篇文章主要介绍了VueJS全面解析的相关资料,需要的朋友可以参考下
    2016-11-11
  • Vuex 入门教程

    Vuex 入门教程

    这篇文章主要介绍了Vuex 入门教程,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 那这个 vuex 怎么用呢?就具体来看一下吧
    2018-01-01

最新评论