交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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-cli 3中给stylus、sass样式传入共享的全局变量
    • 在vue项目中使用sass语法问题
    • mpvue全局引入sass文件的方法步骤
    • vue安装和使用scss及sass与scss的区别详解
    • vue项目中引入Sass实例方法

    广而告之:
    热门推荐:
    windows下apache搭建php开发环境

    本文详细介绍了在Windows2003下使用Apache2.2.21/PHP5.3.5/Mysql5.5.19/phpMyAdmin3.4.9搭建php开发环境。 第一步:下载安装的文件 1. Apache 版本 httpd-2.2.21-win32-x86-no_ssl.msi 2. MySQL 版本 mysql-5.5.19-win32.msi 3. PHP 版本 php-5.3.5-Win32-VC6-x86.zip 4. ph···

    基于在生产环境中使用php性能测试工具xhprof的详解

    xhprof 是facebook开源出来的一个php性能测试工具,也可以称之为profile工具,这个词不知道怎么翻译才比较达意。跟之前一直使用的xdebug相比,有很多类似之处。以前对xdebug有一些记录还可以供参考,但是它的缺点是对性能影响太大,即便是开启了profiler_enable_trigger···

    jQuery EasyUI API 中文文档 可调整尺寸

    Resizable 可调整尺寸 用$.fn.resizable.defaults重写defaults。 用法 复制代码 代码如下: <div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#rr').resizable({ maxWidth:800, maxHeight:600 }); 特性···

    Coolite Cool Study 2 同时更新多个Tab

       当时用Coolite做测试遇到两个问题: 1. 传递给Tab的Url参数会莫名其妙的被添加上其他字符(到Coolite论坛上问了一下估计是bug)。正常情况下,google搜索url是这个样子:http://www.google.com/search?q=Hello   但因为Coolite在Tab的Url后面添加···

    6.0升级6.5后,会员发布的信息,在后台没有见到

    如题所示,升级后,会员发布的信息,点击审核信息,没有在右侧列表看到会员发布的信息。请教该如何解决? 你用户组选择了“只能管理自己发布的信息”

    一个不错的可以检测多中浏览器的函数和其它功能第1/2页

    //Examine the browser  检测浏览器的函数var userAgent = navigator.userAgent.toLowerCase(); var is_opera  = (userAgent.indexOf('opera') != -1); var is_saf    = ((u···

    深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

    我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解···

    ThinkPHP实例化模型的四种方法概述

    本文讲述了ThinkPHP实例化模型的四种方法,对于ThinkPHP程序设计来说有非常重要的应用。具体如下: 1、创建一个基础模型:实例化一个系统自带的数据库操作类    Test.Model.class.php页面代码如下: class TestModel extends Model{ }    UserA···

    tangram.js库实现js类的方式实例分析

    本文实例讲述了tangram.js库实现js类的方式。分享给大家供大家参考,具体如下: 前面一篇//www.kunjuke.com/article/25781.htm对tangram.js库做了较为详细的介绍,这里结合实例分析一下tangram.js库实现js类的方式。代码如下: /* * Tangram * Copyright 2010 Baidu Inc. Al···

    JavaScript正则表达式exec/g实现多次循环用法示例

    本文实例讲述了JavaScript正则表达式exec/g实现多次循环用法。分享给大家供大家参考,具体如下: var x = "a.xxx.com b.xxx.com c.xxx.com"; 希望得到 ["a","b","c"] 这三个结果 1. 正则需要 添加 g 2. exec 循环,直到返回空 代码如下,会输出 a b c var x = "a.xxx.com b···