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来搭建项目. 本章 ...
随机推荐
- vue中的.passive修饰符
一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...
- [转载]C# MemoryStream(内存流)
MemoryStream位于System.IO命名空间,为系统内存提供流式的读写操作.常作为其他流数据交换时的中间对象操作. 1.MemoryStream类封装一个字节数组,在构造实例时可以使用一个字 ...
- React native 禁止手势触摸 pointerEvents
碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域. 这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换. 原先采取过的方法是在对应的触 ...
- C语言--函数嵌套调用
一.实验作业(6分) 本周作业要求: 选一题PTA题目介绍. 学习工程文件应用,设计实现学生成绩管理系统. 学生成绩管理系统要求 设计一个菜单驱动的学生成绩管理程序,管理n个学生m门考试科目成绩,实现 ...
- 并发艺术--java并发机制的底层实现原理
前言 Java代码在编译后会变成Java字节码,字节码被类加载器加载到JVM里,JVM执行字节码,最终需要转化为汇编指令在CPU上执行,Java中所使用的并发机制依赖于JVM的实现和CPU的指令. 一 ...
- libevent实现TCP 服务端
libevent实现Tcp Server基于bufferevent实现 /******************************************************** Copyri ...
- 某 游戏公司 php 面试题
1.实现未知宽高元素的水平垂直居中,至少两种方法. <div, class="father"> <div class="son">< ...
- 1231: 删除字符串中指定的字符(Java)
WUSTOJ 1231: 删除字符串中指定的字符 题目 原题链接 Description 明天就要英语考试了,小明明正在挑灯夜战背单词.小明明发现单词很难背,背一个忘一个.经过仔细研究,小明明发现单词 ...
- react以组件为中心的代码分割和懒加载
背景 随着项目越来越复杂,功能够越来越多,JS单个文件就会比较臃肿,js代码拆分显得必不可少. Js文件拆分主要分为按照路由进行js拆分.按照组件进行js拆分. 按照路由拆分:因为本项目请求路径得原因 ...
- hdu 1325
.,. 还是待整理 #include <stdio.h> const; typedef struct { int num,root,conn;//数据.根.入度 }Node; Node n ...