Question

TL; DR ：要出于主题化目的而使用角度服务切换css文件。

我的解决方案（混乱，不喜欢）：

当前，我的Webpack（版本4）设置为生成x个带有散列的主题CSS文件（例如dark.dsff5468g.css，light.dsff5468g.css等）。我的Weback配置：

    entry: {
        "polyfills": "./src/polyfills.ts",
        "vendor": "./src/vendor.ts",
        "light": "./src/app/theme/theme.light.scss",
        "dark": "./src/app/theme/theme.dark.scss",
        "app": "./src/main.ts"
    },

在我的应用程序配置文件中，我在应用程序启动时加载的内容已定义了这些主题，例如：

appConfig: {
    themes: ["dark", "light", "blue"],
    activeTheme: "dark"
}

页面加载时，我通过将主题名称与样式表映射来从服务中获取样式表的引用。因此，如果说样式表的名称中具有“深色”，那么我可以将路径映射到具有“深色”主题的css。最后，我得到了一个像这样的对象：

themes: [
{name: "dark", src: "dark.dsff5468g.css"},
{name: "light", src: "light.dsff5468g.css"}
]

最后一步是从<head>标记中删除所有非actualTheme的主题css文件。

我对这种方法的关注：

该页面会加载所有css文件，即使它不需要它们也是如此
我需要手动将名称与样式表源匹配
我需要从<head>删除css文件

可能：

要获取从Webpack到angular的主题样式表的引用？
对于webpack，不附加它们，而是留一个角度决定哪个主题css附加，哪个不附加到<head>标签？

获取有关在角度服务内部使用Webpack生成的样式表的参考

0 个答案: