之前在用vue-cli3框架的时候对于常用的less 、sass 变量都是需要时就在单文件中引入文件,这样做比较麻烦。那么基于 vue-cli3 如何配置全局的less 、sass 变量?

《1》安装
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 《2》vue.config.js配置 1.配置全局less变量
//第三方插件
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
//这个是加上自己的路径,注意:试过不能使用别名路径
path.resolve(__dirname, "./src/assets/variable.less")
]
}
} 2.配置全局sass变量
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
data: `@import "~@/variables.scss";`
}
}
}

  经过这么点小优化,就无需在需要使用变量时在单文件中引入一次文件

vue-cli3 配置全局less 、sass 变量的更多相关文章

  1. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  2. vue cli3配置开发环境、测试环境、生产(线上)环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

  3. @vue/cli3+配置build命令构建测试包&正式包

    上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...

  4. vue/cli3 配置相对路径

    根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...

  5. vue中怎么全局引入sass文件

    1.添加依赖 npm install sass-resources-loader --save-dev 2.修改build/utils.js scss: generateLoaders('sass') ...

  6. vue cli3 配置postcss

    1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...

  7. vue cli3如何引入全局less变量

    最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用: 1.在assets下创建一个less文件: 2.安装style-resources-loader (npm i styl ...

  8. 通过 sass-resources-loader 全局注册 Sass/Less 变量

    使用webpack引入sass/less全局变量 sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的 ...

  9. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

随机推荐

  1. 阿里云ECS服务器活动99元一年(2019年 Hi拼团,拼着买,更划算)

    2019年10月22日更新,阿里云推荐有礼活动:ECS突发性能T6-低至99元/年赶紧上车~ 低价高性能,拼着买更划算 点我参加活动>> 购买前领取阿里云幸运券,更有可能享受折上折的优惠. ...

  2. 【数据库开发】MySQL命令大全

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...

  3. Flink中API使用详细范例--window

    Flink Window机制范例实录: 什么是Window?有哪些用途? 1.window又可以分为基于时间(Time-based)的window 2.基于数量(Count-based)的window ...

  4. K8S从入门到放弃系列-(1)环境初始化

    一.系统规划  主机名 IP   组件  k8s-master01 10.10.0.18 etcd.kube-apiserver.kube-controller-manager.kube-schedu ...

  5. Windows用Eclipse来开发hadoop的WordCount的helloworld

    [学习笔记] 2.Win7用Eclipse来开发hadoop的WordCount的helloworld网上下载hadoop-eclipse-plugin-2.7.4.jar,将该jar包拷贝到Ecli ...

  6. VMware安装windows7系统

    1.进入VMware系统,选择创建新的虚拟机 2.进入安装页面,选择自定义安装 3.选择虚拟机硬件兼容性,选择与自己软件相匹配的硬件兼容性 4.选择下一步后,选择稍后安装操作系统 5.选择客户机操作系 ...

  7. 100天搞定机器学习|Day3多元线性回归

    前情回顾 [第二天100天搞定机器学习|Day2简单线性回归分析][1],我们学习了简单线性回归分析,这个模型非常简单,很容易理解.实现方式是sklearn中的LinearRegression,我们也 ...

  8. Oracle数据库 SET ECHO [ON|OFF]

    说明 -- 运行.sql文件时,显示.sql文件中的语句 SET ECHO ON -- 运行.sql文件时,不显示.sql文件中的语句 SET ECHO OFF Oracle 11g Release ...

  9. Message高级特性

    一.延迟和定时消息投递 1 xml中配置schedulerSupport属性为true 2 每小时都会发生消息被投递10次,延迟1秒开始,每次间隔1秒: TextMessage message = s ...

  10. Linux--CentOS 安装 Docker 教程

    本文主要介绍 CentOS 系统安装 Docker 的流程. 前提条件 OS 要求 CentOS7: The centos-extras repository must be enabled. Thi ...