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来搭建项目. 本章 ...
随机推荐
- Redis set集合的使用
集合中的元素个数最多为2的32次方-1个,集合中的元素师没有顺序的. Redis集合的操作命令和对应的api如下: smembers [set]JedisAPI:public Set<Strin ...
- VMware中 CentOs虚拟机的安装教程
首先点击创建新的虚拟机 选择典型安装,点击下一步 这里我们选择稍后安装操作系统,然后点击下一步 这里我们操作系统选择Linux操作系统,版本选择CentOs 7 64位,然后点击下一步 这里我们可以修 ...
- .net和ASP.net,c#的区别
.NET.C#和ASP.NET三者之间的区别如下: 一.什么是.NET?.NET是微软公司下的一个开发平台,.NET核心就是.NET Framwork(.NET框架)是.NET程序开发和运行的环境,在 ...
- Detect cycle in a directed graph
Question: Detect cycle in a directed graph Answer: Depth First Traversal can be used to detect cycle ...
- hadoop WordCount例子详解。
[学习笔记] 下载hadoop-2.7.4-src.tar.gz,拷贝hadoop-2.7.4-src.tar.gz中hadoop-mapreduce-project\hadoop-mapreduce ...
- Linux (x86) Exploit 开发系列教程之一(典型的基于堆栈的缓冲区溢出)
(1)漏洞代码 //vuln.c #include <stdio.h> #include <string.h> int main(int argc, char* argv[]) ...
- docker&k8s-配置/常用命令
kubectl delete deployment,ingress,svc demo-mml-jp-ylmopt-web-1 -n demo-mml #删除预生产环境mml组ylmopt-web ...
- Python+Appium启动手机APP或者浏览器
一.设备信息配置 脚本如下: from appium import webdriver class my_app(): def __init__(self): desired_caps = {} # ...
- MySql数据库 优化
MySQL数据库优化方案 Mysql的优化,大体可以分为三部分:索引的优化,sql慢查询的优化,表的优化. 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更 ...
- .net core partial view的一些心得
原文:.net core partial view的一些心得 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...