VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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实例方法

    广而告之:
    热门推荐:
    HTML利用超链接打开链接文件的方法介绍

    a和href属性HTML用<a>来表示超链接,英文叫anchor。   <a>可以指向任何一个文件源:一个HTML网页,一个图片,一个影视文件等。用法如下:   <ahref="url">链接的显示文字</a>点击<a></a>当中的内容,即可打开一个链接文件,···

    Node.js实现连接mysql数据库功能示例

    本文实例讲述了Node.js实现连接mysql数据库功能。分享给大家供大家参考,具体如下: Node.js连接数据库前,需要安装相应的包,如果安装sql server 需要先装包node-sqlserver。我们以mysql为案例来说明node.js查询mysql数据。 1、安装 node-mysql npm install node-mysql 2、···

    PHP SFTP实现上传下载功能

     一、SFTP介绍: 使用SSH协议进行FTP传输的协议叫SFTP(安全文件传输)Sftp和Ftp都是文件传输协议。区别:sftp是ssh内含的协议(ssh是加密的telnet协议), 只要sshd服务器启动了,它就可用,而且sftp安全性较高,它本身不需要ftp服务器启动。 sftp = ssh + ftp(安···

    PHP判断文件是否被引入的方法get

    本文实例讲述了PHP判断文件是否被引入的方法get_included_files用法。分享给大家供大家参考,具体如下: <?php // 本文件是 abc.php include 'test1.php'; include_once 'test2.php'; require 'test3.php'; require_once 'test4.php'; $included_files = get_included···

    Vue和React组件之间的传值方式详解

    在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎以下几种: 父子之间 兄弟之间 多层级之间(孙子祖父或者更多) 任意组件之间 父子之间 Vue Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现···

    织梦dedeCMS程序 HTML网站地图怎么做

    网站地图分为两种。  1:xml格式的地图。这种地图的方式就不用说了,这种网上工具多了。  2:HTML格式的地图。这种地图的制作方式,需要你写一个前台模板,比如叫map.htm,把模板里的标签写成调用所有栏目及所有文档。  然后修改生成:  选择主···

    基于PHP常用字符串的总结(待续)

    1.分割与合并implode:echo implode(",", array('lastname', 'email', 'phone'));//数组转成字符串 explode:print_r(explode(",", 'lastname,email,phone'));//字符串转成数组 split:print_r(split("[/.-]","2008-9.12"));//以/或.或-任一符号切成数组 str_split:print_r(···

    5个步骤实现响应式Web设计方法 与瀑布模式说”再见”(图文教程)

      恭喜你终于使领导们信服:你的下一个Web 设计项目需要进行响应式设计。虽然说服他们相信是一件非常艰难的事情,但是你现在不能在荣誉上休息。现在项目最关键的问题是:如何带领你的团队去构建响应式设计?  响应式简介  你可能熟悉典型的“瀑布模式”的···

    PDO::rollBack讲解

    PDO::rollBack PDO::rollBack — 回滚一个事务(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明 语法 bool PDO::rollBack ( void ) 回滚由PDO::beginTransaction()发起的当前事务。如果没有事务激活,将抛出一个 PDOException 异常。 如果数据库被设置成自动提交模式,此函数(···

    vue.js中父组件调用子组件的内部方法示例

    前言 今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子🌰 示例代码 子组件: <template> <div> child </div> </temp···