VueCli3 使用 NutUI (按需加载、定制化主题)
创建vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
scss: {
// @/ 是 src/ 的别名
// 注意:在 sass-loader v7 中,这个选项名是 "data"
prependData: `
@import "@/assets/custom_theme.scss";
@import "@nutui/nutui/dist/styles/index.scss";
`,
}
},
}
}
设置bable.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
["@nutui/babel-plugin-separate-import", {
"libraryName": "@nutui/nutui",
"libraryDirectory": "dist/packages",
"style": "scss"
}]
]
}
在src/assets/目录里创建custom_theme.scss文件
// scss文件示例内容
$btn-gradient-bg: #043d6a;
$btn-gradient-active-bg: #053D7E;
$btn-gradient-color: #fff;
VueCli3 使用 NutUI (按需加载、定制化主题)的更多相关文章
- 在webpack自定义配置antd的按需加载和修改主题色
最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...
- 【koa2基础框架封装】基于Proxy路由按需加载器和初始加载器
我们在使用koa2做路由拦截后一般都习惯于直接将查找对应处理函数的过程映射到项目的文件夹目录,如: router.get('/test', app.controller.index.test); ap ...
- React引入AntD按需加载报错
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...
- 按需加载.js .css文件
首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...
- Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...
- angularJS 按需加载
之前做应用的时候都会在首页就把全站的js预先加载进来... 怎么实现按需加载? 首先在$routeProvider里面加resolve属性,angular-route提供的resolve功能,也就是路 ...
- react-router配合webpack实现按需加载
很久没有写博客了.一直感觉没有什么要写的,但是这个东西确实有必要的.使用react开发,不可能一直打包到一个文件.小项目肯定没有问题,但是变大一旦到几兆,这个问题就很严重.现在又Commonjs,AM ...
- requirejs按需加载angularjs文件
之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
随机推荐
- Vue 引入 .md 文件,解析markdown语法
module.exports = { chainWebpack: config => { config.module .rule('md') .test(/\.md$/) .use('html- ...
- [LeetCode] 146. LRU Cache 近期最少使用缓存
Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...
- Kubernetes 基于 RBAC 的授权(十六)
目录 一.RBAC介绍 1.1.角色和集群角色 1.2.RoleBinding 和 ClusterRoleBinding 1.3.资源 1.4.主体 二.命令行工具 2.1.kubectl creat ...
- 【Android Studio】Android实现跳转功能
最近在玩Esp32,需要APP,顺带学了下这方面的东西. 主要实现功能: 从主 mainActivity 跳转到otherActivity. 新建一个hello工程,添加 otherActivit ...
- Jmeter接口测试自动化(jmeter+ant+jenkins持续集成)
Jmeter是压力测试.接口测试工具,Ant是基于Java的构建工具,具有跨平台的作用,jenkins是持续集成工具.将这三者结合起来可以搭建一套webservice接口测试的持续构建环境. 1. ...
- 看看这5个最容易犯的Java错误,你犯了没?
人非圣贤,孰能无过.都说Java语言是一门简单的编程语言,基于C++演化而来,剔除了很多C++中的复杂特性,但这并不能保证Java程序员不会犯错.那么对于广大的Java程序员来说,它们最容易犯的几个错 ...
- c++入门构造函数
一种方法: class Student{ public: //声明有默认参数的构造函数 Student(,,float=10); //声明成员函数 void total(); private: //声 ...
- React路由传参的三种方式
方式 一: 通过params 1.路由表中 <Route path=' /sort/:id ' component= ...
- springboot2.1.8使用poi导出数据生成excel(.xlsx)文件
前言:在实际开发中经常需要将数据库的数据导出成excel文件,poi方式则是其中一种较为常用的导出框架.简单读取excel文件在之前的一篇有说明 本项目实现需求:user发出一个导出student信息 ...
- Prism
网址:https://prismjs.com 使用教程:https://www.cnblogs.com/zhibu/p/6272338.html 使用教程:https://www.zlinet.com ...