首页 > 解决方案 > Angular DevExtreme 主题

问题描述

我正在尝试为 Angular 的 DevExtreme 小部件加载主题。我遵循了不同的方法:

  1. 在 angular.json 中设置样式但不会产生任何影响:

    "projects": {
    "my-project": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/manifest.json"
            ],
            "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/material-design-icons/iconfont/material-icons.css",
              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.dark.css",
              "src/sass/styles.scss"
            ],
    
  2. 在 index.html 中设置它但也没有效果:

    <head>
       ...
      <link rel="dx-theme" data-theme="generic.dark" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.dark.css" data-active="true" />
    </head>
    

并将其设置为DxThemes.current('generic.dark');

  1. 使用 (2) 中的语言环境 css 文件:

    <head>
       ...
      <link rel="dx-theme" data-theme="generic.dark" href="css/dx.dark.css" data-active="false" />
    </head>
    

但我的浏览器说:

拒绝应用来自 ' http://localhost:4200/css/dx.dark.css ' 的样式,因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查。

所以我的问题是:我如何使用语言环境 css 文件?为什么不应用主题?

标签: angularthemesdevextreme

解决方案


诀窍是使用ng build --prod. 无论有ng serve没有生产模式,它都不起作用......


推荐阅读