第一种直接在main.js中引入,需要声明loader

demo:

import '!style-loader!css-loader!less-loader!./assets/css/common.less'

这样可以实现common.less样式的全局作用域,但是不能在局部vue文件中使用less中声明的变量

第二种使用style-resourses-loader这个loader,官网上也有说明,查了很多都是这种方法:

安装loader

npm install style-resources-loader -D

在vue.config.js中配置pluginOptions

如下:

// 第三方插件配置
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [path.resolve(__dirname, "./src/assets/css/common.less")]
}
}
项目可以启动但是样式没有加载,里面的变量也不能使用,不知道怎么回事儿
3 配置css中的loaderOptions:
官方文档上只有sass的例子:
demo
css:{
  loaderOptions:{
    sass:{
      //要处理的sass文件路径
      data:`@import "~@/assets/css/common.less";`
      }
  }
亲测可以,实现全局样式引入以及局部vue文件中可以使用sass文件中定义的变量;
如果是less文件,则只能定义全局变量,不能直接引入文件:
css:{
  loaderOptions:{
    less:{
      //全局变量名
      globalVars:{
          color1:'red';
        }
      }
  }
}
亲测可以参考文档:http://lesscss.org/usage/#less-options

在sass less文件中定义元素的背景图路径问题:

 background: url("~../assets/logo.png");

如果直接写在vue文件的style标签中,直接相对路径就可以,css文件中也是,less scss文件中需要在路径前面加上~,在img标签中引入本地的图片,也直接写相对路径就可以了;

在data中声明数据,有图片的本地路径,需要使用模块引入的方法:

require('../assets/logo.png')

vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则的更多相关文章

  1. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  2. vue cli3项目中使用qrcodejs2生成二维码

    组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...

  3. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  4. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  5. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  6. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  7. vue -- 使用sass并引入公共sass文件

    sass可以提高我们的开发效率,怎么在vue的项目中使用sass并且可以设置一些公共的文件呢? 使用sass 1.安装sass的依赖包 npm install --save-dev sass-load ...

  8. eclipse java项目中明明引入了jar包 为什么项目启动的时候不能找到jar包 项目中已经 引入了 com.branchitech.app 包 ,但时tomcat启动的时候还是报错? java.lang.ClassNotFoundException: com.branchitech.app.startup.AppStartupContextListener java.lang.ClassN

    eclipse java项目中明明引入了jar包 为什么项目启动的时候不能找到jar包 项目中已经 引入了 com.branchitech.app 包 ,但时tomcat启动的时候还是报错?java. ...

  9. RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决

    RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决 前言 最近学习React Native技术.将RN引入到原来Xcode项目中有一步:给原来Xcode项目添加所需要的Pod依赖 写好Po ...

随机推荐

  1. Pytest权威教程21-API参考-05-对象(Objects)

    目录 对象(Objects) CallInfo Class Collector Config ExceptionInfo FixtureDef FSCollector Function Item Ma ...

  2. Android Studio—增删改查—登录功能

    SQLite数据库的常用操作: create table if not exists 表名(字段1 类型(长度),字段2 类型(长度),...)//       建表 drop table if ex ...

  3. Java 基础:Map的一家

    0.Java中的集合框架 1.Map--接口 public interface Map<K,V> 包:java.util.Map Map提供了一种映射关系,其中的元素是以键值对(key-v ...

  4. 关于hexo与github使用过程中的问题与笔记

    快速阅读 如何用github 和hexo 创建一个blog 1.github中要新建一个与用户名同一样的仓库, 如:homehe.github.io - 必须是io后缀.一个帐户 只能建立一个 2. ...

  5. c++ 模拟java的反射,根据类名动态创建类

    参考: https://blog.csdn.net/jnu_simba/article/details/9318799 原先有静态变量依赖问题, https://blog.csdn.net/anony ...

  6. Confluence 实现公司wiki【转】

    Confluence是一个企业级的Wiki软件,可用于在企业.部门.团队内部进行信息共享和协同编辑一.安装过程1 安装并配置mysql [root@vm1 ~]# /etc/my.cnf charac ...

  7. phpstorm 断点调试总是从index.php的第一行开始

    去掉勾选,重开phpstorm

  8. ActiveMQ参数异常 “Invalid broker URI”

    某次启动项目报错,提示ActiveMQ参数异常 该参数的值配置如下 跟踪读取配置的代码如下,可以看到读取我配置的key为xmq.actmq.connection.url.forSend的对应值,赋值到 ...

  9. VS2019,打开项目之后显示:System.NullReferenceException: 未将对象引用设置到对象的实例

    关闭项目,删除项目文件夹下的隐藏文件夹.vs和bin/obj文件夹

  10. github资源汇总

    github免费的编程中文书籍索引 机器学习(Machine Learning)&深度学习(Deep Learning)资料(Chapter 1) Python 资源大全中文版