先说问题吧。
最近在看 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: