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来搭建项目. 本章 ...
随机推荐
- 【VS开发】【数据库开发】libevent简单入门和介绍
libevent是一个基于事件触发的网络库,memcached底层也是使用libevent库,今天学习下. 总体来说,libevent有下面一些特点和优势: * 统一数据源, 统一I/O事件,信号和定 ...
- php csv 简单的导入
if($act == 'user_upload_do'){ global $db; $filename = $_FILES['file']['tmp_name']; if (empty ($filen ...
- Python视频教程免费分享(2020年最新版)
为期92天的全套Python视频教程免费分享,总计57G! 里面还有我的笔记,希望对大家有帮助哈~ 1-32天 … … 65-92天 百度云网盘: 链接: https://pan.baidu.com/ ...
- 《Mysql - 字符串索引应该如何建立?》
一:概述 - 我有一个需求是需要邮箱登录的, - mysql> select f1, f2 from SUser where email='xxx'; - 我们知道,如果不在 email 上建立 ...
- Calibre 和 Kindle 配合的使用方法
1. 前言 使用"Calibre"软件,把网上下载的电子书转换成适合kindle阅读的格式. 2. 使用经验总结 2.1 首行缩进.段落间距设置 2.2 输出为mobi格式设置 2 ...
- python中内存地址
遇到一个朋友,给我提了一个问题:python中的两个相同的值,内存地址是否一样? 当时印象里有这样一句话:Python采用基于值的内存管理模式,相同的值在内存中只有一份 于是张嘴就说是一样的 朋友说不 ...
- Linux自动运维工具Ansible的使用
Linux自动运维工具Ansible的使用 我们熟悉这个工具后, 可以很轻松的安装k8s. 一.介绍 ansible - run a task on a target host(s) Ansible是 ...
- hdu 2544 Dijstra模板题
最短路 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- (十二)SpringBoot之Spring-Data-Jpa(一)
一.Spring-Data-Jpa概念 JPA(Java Persistence API)定义了一系列对象持久化的标准,目前实现这一规范的产品有Hibernate.TopLink等. Spring D ...
- ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2 动态数据的呈现
https://www.cnblogs.com/cynchanpin/p/7065098.html 在MVC3開始.视图数据能够通过ViewBag属性訪问.在MVC2中则是使用ViewData.MVC ...