vue-cli3 配置全局less 、sass 变量
之前在用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 变量的更多相关文章
- vue/cli3 配置vux
安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...
- vue cli3配置开发环境、测试环境、生产(线上)环境
cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...
- @vue/cli3+配置build命令构建测试包&正式包
上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...
- vue/cli3 配置相对路径
根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...
- vue中怎么全局引入sass文件
1.添加依赖 npm install sass-resources-loader --save-dev 2.修改build/utils.js scss: generateLoaders('sass') ...
- vue cli3 配置postcss
1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...
- vue cli3如何引入全局less变量
最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用: 1.在assets下创建一个less文件: 2.安装style-resources-loader (npm i styl ...
- 通过 sass-resources-loader 全局注册 Sass/Less 变量
使用webpack引入sass/less全局变量 sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的 ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
随机推荐
- 最新 中手游java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.中手游等10家互联网公司的校招Offer,因为某些自身原因最终选择了中手游.6.7月主要是做系统复习.项目复盘.LeetCo ...
- [转帖]CentOS 8 都发布了,你还不会用 nftables?
CentOS 8 都发布了,你还不会用 nftables? https://www.cnblogs.com/ryanyangcs/p/11611730.html 改天学习一下 原文链接:CentOS ...
- linux下使用Oracle常用命令
进入Oracle用户 su - oracle 以dba身份进入sql语句 sqlplus / as sysdba 启动数据库相关命令启动数据库 startup 启动监听(关闭监听的命令lsnrctl ...
- Fiddler之手机抓包
1.Fiddle设置端口,Tools->Options->Connections, 2.手机设置代理服务器: 注意:要保证手机和PC电脑IP在同一个网段(或者同一个网关) (1).安卓手机 ...
- Redis 常用命令学习二:字符串类型命令
1.赋值与取值命令 127.0.0.1:6379> set foo helloredis OK 127.0.0.1:6379> get foo "helloredis" ...
- In-App Purchase(iap)快速指南
点击IOS IAP APP内支付 Java服务端代码直接跳转到示例点击直接跳转到示例 iap简介 在应用中内嵌Store,在iOS应用中使用Store Kit framework来实现In-A ...
- java中不常见的关键字:strictfp
1.strictfp, 即 strict float point (精确浮点). strictfp 关键字可应用于类.接口或方法.使用 strictfp 关键字声明一个方法时,该方法中所有的float ...
- 服务提供者框架讲解 之 myJDBC
利用一个简单的myJDBC,讲一下'服务提供者框架'的思想.主要是思想 目录 什么是 服务提供者框架 代码讲解 服务接口 服务提供者接口 服务注册API.服务访问API 静态工厂方法 服务实现类 – ...
- JSON文件转为Excel
前言 今天在帮老师做年终党统的时候,发现管理平台上没有将正在发展的同志的信息导出功能,只能一个一个点击进去查看,操作起来步骤很多很麻烦,所以我就想到了"扒"一下这个网页,扒下来发现 ...
- 利用Python进行数据分析_Pandas_基本功能
申明:本系列文章是自己在学习<利用Python进行数据分析>这本书的过程中,为了方便后期自己巩固知识而整理. 第一 重新索引 Series的reindex方法 In [15]: obj = ...