global.min.css,配置全局及自定义主题样式
先说问题吧。
最近在看 primeng 的源码,框架是支持主题切换的,主题样式使用 sass,主题的切换是通过动态替换全局主题 css 文件来实现的。
1
2
3
4
5changeTheme(event: Event, theme: string) {
let themeLink: HTMLLinkElement = document.getElementById('theme-css');
themeLink.href = 'assets/components/themes/' + theme + '/theme.css';
event.preventDefault();
}
所以想知道在使用 Angular CLI 构建项目过程中这些theme css如何生成? primeng 源码本身貌似是使用了 gulp,但是 Angular CLI 本身应该也可以做到,一探究竟。
Angular CLI: 6.1.1
Node: 10.7.0
OS: win32 x64
Angular:
…
通过在angular.json文件的项目build选项中配置styles,我们可以添加更多的全局样式:
1
2
3
4
5
6
7
8
9
10"architect": {
"build":{
"builder": "@angular-devkit/build-angular:browser",
"options": {
"styles": [
"node_modules/fullcalendar/dist/fullcalendar.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"src/styles.css",
{ "input": "src/resources/themes/cruze/theme.scss","bundleName": "assets/themes/cruze","lazy": true }
],
其中bundleName指定了input里面的样式编译后输出的目录,如果不使用这种对象格式,则会全部一起合并打包生成styles.js (或者 styles.css)
lazy: true 表示只生成该样式,但并不引入到index.html文件中。否则,会自动在index.html中引入生成的文件。
使用 –extract-css build 或者 prod 模式则会生成.css
所以如果使用ng run build --extract-css, 上述配置将会把 resouces 下相应的 theme.scss 编译成 css 并放入 assets/themes 目录下。
另外一个问题,如果使用生产模式编译,最终生成的 css 会附带 hash 串。
通过--output-hashing可以设置输出 hash 的模式,可能的值有:
none: no hashing performed
media: only add hashes to files processed via [url|file]-loaders
bundles: only add hashes to the output bundles
all: add hashes to both media and bundles
none is the default for the development target.
all is the default for the production target.
目前想到的解决方法:在 build 完成后,使用脚本去修改名称。类似
rename.js1
2
3// rename.js file - location, right next to package.json
var fs = require('fs');
fs.rename('./dist/main.bundle.js', './dist/myproject.js');
和
package.json1
2
3"scripts":{
"build-rename":"ng build && node rename.js"
}
1alert('Hello World!');
second
[TO BE UPDATED IN FUTURE]
references:
global.min.css,配置全局及自定义主题样式相关推荐
- Typora自定义主题样式
Typora自定义主题样式 1.打开Typora开发者工具 视图 --> 开发者工具(Shift + F12) 2.使用选区工具选中想要更改的元素 3.查看styles区域 4.修改颜色并预览 ...
- android 自定义主题样式
From: http://blog.csdn.net/dawanganban/article/details/17732701 http://www.cnblogs.com/bluestorm/arc ...
- android 系统自带主题样式及自定义主题样式
From: http://blog.csdn.net/dawanganban/article/details/17732701 http://www.cnblogs.com/bluestorm/arc ...
- VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程 下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件 安装扩展插 ...
- 博客园自定义主题样式
题记 对于有强迫症的童鞋来说,一个长得不美观或者不能满足我们日常的审美需求的页面,总会有想要改造它的冲动,好吧,让我们来调试下博客园提供的默认主题样式,让页面更加清爽宜人,简洁大气. Section ...
- IntelliJ IDEA 自定义主题样式设置
这里推荐几款不错的IntelliJ IDEA的主题皮肤:http://www.riaway.com/ ,选择自己喜欢的主题下载到本地计算机后,打开IntelliJ IDEA按步骤File->Im ...
- Vue中ECharts配置和使用自定义主题(超简单,包教会)
配置样式 这里介绍两种方式,小伙伴们看个人情况选择 1.采用最简单的方式 配置的样式参考Echarts官网 点我直达Echarts官网, // theme.json {"default&qu ...
- global.min.css,css3-媒体查询样式不覆盖原始样式
我正在尝试对正在建立的网站使用一些媒体查询. 但是,我遇到的问题是,实际上正在应用媒体查询样式时,它们却被覆盖了. 我无法告诉我原因,因为我使用的是相同的选择器. 谁能指出我没看到的东西? 原始CSS ...
- iview 自定义主题样式
官方地址http://v1.iviewui.com/docs/guide/theme 官方提供了两种方法: 变量覆盖 使用安装工具修改 变量覆盖 在项目中创建一个my-theme文件夹,在该文件夹中创 ...
最新文章
- 部署自建CA颁发证书实现https加密
- BZOJ2822 [AHOI2012]树屋阶梯
- 【坐在马桶上看算法】算法4:队列——解密QQ号
- 深入了解学习C++的意义与就业方向
- Mariadb数据库设置及操作 一主多从 备份还原(实测笔记)
- java开发sublime插件_开发者最常用的8款Sublime text 3插件
- 增值税常见的税务筹划方法,干货!收藏!
- python表情包合集_python——简单生成表情包
- 爱快路由网关到网关配置open***
- 关于T—SQL与SQL企业管理器
- JQuery中 JSON 兼容性问题(针对ie8)
- HDU 2094 产生冠军
- angular设置路由实现无刷新跳转
- 嵌入式 linux yum命令详解
- ES与传统数据库,为什么用ES?
- 单词接龙acwing
- 《C++ Templates》笔记 Chapter 12 Fundamentals in Depth-Chapter 13 Names in Templates
- MATLAB Linear Analysis Tool 的bode图数据获取
- 编写一个函数,计算两个数字的和,差,积,商
- 颜色的前世今生1·一切从光开始
热门文章
- 【认证系统】win7主题下载
- 亚马逊数据分析选品的几个维度你都知道吗?
- iOS 平台游戏如何对接 GameCenter
- 石油大学计算机学院宏利,【计算机·任前公示】2019-2020计算机与信息技术学院学生干部公示名单...
- 数学建模学习(2)—— 客户流失预警模型案例评估 ROC曲线与KS曲线(2022.7.19)
- 华为6面,测试岗报价11k,HR说我不尊重华为,他们没有那么低薪资岗位?
- 锐龙R3-3200G 配什么主板
- 计算机显示图形原理,计算机图形学:图形的计算与显示原理
- Hardware ---常用的接口和通信协议SPI
- PHP elasticsearch 条件过滤、排序、高亮实现