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: