правила CSS получение опущены после transpiling в угловых 8

голоса
0

Я модернизировал мое заявление от Angular 2 до угловой 8. Я заметил несколько правил CSS опущены после transpiling кода. Ниже мой package.json, tsconfig.json и angular.json

package.json

{
  name: xxx-webapp,
  version: 1.0.0,
  license: ISC,
  scripts: {
    ng: ng,
    start: ng serve,
    build: ng build --base-href ./ --deploy-url /Content/Angular/Deploy/,
    test: ng test,
    lint: ng lint,
    e2e: ng e2e
  },
  private: true,
  dependencies: {
    @angular/animations: 8.2.7,
    @angular/common: 8.2.7,
    @angular/compiler: 8.2.7,
    @angular/core: 8.2.7,
    @angular/forms: 8.2.7,
    @angular/platform-browser: 8.2.7,
    @angular/platform-browser-dynamic: 8.2.7,
    @angular/router: 8.2.7,
    @ngui/datetime-picker: 0.16.2,
    angular-linky: 1.2.2,
    angular-resizable-element: ^3.2.4,
    angular2-color-picker: 1.3.1,
    angular2-draggable: ^1.0.7,
    bootstrap: ^4.3.1,
    hammerjs: ^2.0.8,
    justified-layout: ^3.0.0,
    ng-lazyload-image: ^6.1.0,
    ng2-file-upload: 1.2.0,
    ngx-carousel: 1.3.5,
    ngx-toastr: ^11.0.0,
    rxjs: 6.5.3,
    zone.js: 0.9.1
  },
  devDependencies: {
    @angular-devkit/build-angular: ^0.803.5,
    @angular/cli: ^8.3.5,
    @angular/compiler-cli: 8.2.7,
    @angular/upgrade: 8.2.7,
    @types/core-js: ^0.9.43,
    typescript: 3.5.3
  }
}

tsconfig.json

{
  compilerOptions: {
    target: es5,
    module: commonjs,
    moduleResolution: node,
    sourceMap: true,
    declaration: false,
    emitDecoratorMetadata: true,
    experimentalDecorators: true,
    removeComments: false,
    noImplicitAny: false,
    outDir: ./Deploy/,
    importHelpers: true,
    typeRoots: [
      node_modules/@types
    ],
    lib: [
      es2019,
      dom
    ]
  },
  angularCompilerOptions: {
    preserveWhitespaces: false
  }
}

angular.json

{
  DigitalJuice-WebApp: {
    root: ,
    sourceRoot: Process/TypeScripts,
    projectType: application,
    prefix: ,
    schematics: {},
    architect: {
      build: {
        builder: @angular-devkit/build-angular:browser,
        options: {
          outputPath: Deploy/,
          index: ,
          main: Process/TypeScripts/main.ts,
          polyfills: Process/TypeScripts/polyfills.ts,
          tsConfig: Process/TypeScripts/tsconfig.app.json,
          assets: [],
          styles: [
            Development/css/StoreNew/Store.css,
            Development/css/StoreNew/CellContainer.css
          ],
          scripts: []
        },
        configurations: {
          production: {
            fileReplacements: [
              {
                replace: Process/TypeScripts/environments/environment.ts,
                with: Process/TypeScripts/environments/environment.prod.ts
              }
            ],
            optimization: true,
            outputHashing: none,
            sourceMap: false,
            extractCss: true,
            namedChunks: false,
            aot: false,
            extractLicenses: true,
            vendorChunk: true,
            buildOptimizer: false,
            budgets: [
              {
                type: initial,
                maximumWarning: 2mb,
                maximumError: 5mb
              }
            ]
          }
        }
      }
    }
  }
}

Фактическое правило CSS, как это в CellContainer.css (включено в стилях angular.json):

.StandardCellOutline {
      box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
      background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, rgb(44, 46, 51), rgb(140, 147, 168), rgb(44, 46, 51));
      background-image: -moz-linear-gradient( bottom, #000000, #141720, #222736), -moz-linear-gradient(left center, #2C2E33, #8C93A8, #2C2E33);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #2C2E33, #8C93A8, #2C2E33);
      background-clip: content-box, padding-box;
      padding: 1px;
  }

  .StandardCellOutline:hover {
      box-shadow: 0px 0px 12px 1px rgba(001, 122, 204, 0.9);
      background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, #4674CD, #4674CD, #4674CD);
      background-image: -moz-linear-gradient( bottom, #000000, #141720, #222736), -moz-linear-gradient(left center, #4674CD, #4674CD, #4674CD);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #4674CD, #4674CD, #4674CD);
  }

Но после того, как transpiling код, он будет выглядеть так:

.StandardCellOutline {
      box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #2C2E33, #8C93A8, #2C2E33);
      background-clip: content-box, padding-box;
      padding: 1px;
  }

  .StandardCellOutline:hover {
      box-shadow: 0px 0px 12px 1px rgba(001, 122, 204, 0.9);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #4674CD, #4674CD, #4674CD);
  }

Вы можете увидеть правила для Chrome и Firefox удаляются. Если я просто изменить порядок, и положил правило для хрома в последнем, то это правило остается. Таким образом, проблема только последнее правило включается и остальные удаляются.

.StandardCellOutline {
          box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
          background-image: -moz-linear-gradient( bottom, #000000, #141720, #222736), -moz-linear-gradient(left center, #2C2E33, #8C93A8, #2C2E33);
          background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #2C2E33, #8C93A8, #2C2E33);
          background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, rgb(44, 46, 51), rgb(140, 147, 168), rgb(44, 46, 51));
          background-clip: content-box, padding-box;
          padding: 1px;
      }

становится

.StandardCellOutline {
          box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
          background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, rgb(44, 46, 51), rgb(140, 147, 168), rgb(44, 46, 51));
          background-clip: content-box, padding-box;
          padding: 1px;
      }

Я попытался изменить свою цель, модуль в TSconfig к es2015, ничего не получалось. Как убедиться, что все правила присутствуют в transpiled коды.

Задан 09/10/2019 в 12:54
источник пользователем
На других языках...                            


1 ответов

голоса
2

Угловое CLI использует Autoprefixer для префиксов браузера конкретных правил CSS.

Руководство по настройке набора правил с помощью browserslist можно найти в официальной документации угловой :

Вы можете сказать, что Autoprefixer браузеры предназначаться, добавив browserslist свойство в файле конфигурации пакета, package.json:

Так просто добавить спецификацию браузеров , которые вы хотите , чтобы поддержать Ваш package.json, например:

"browserslist": [
  "> 1%",
  "last 2 versions"
]

Вы можете удалить вручную поставщика префиксы из вашего CSS кодового, Autoprefixer будет заботиться о том, что в процессе сборки.

Пожалуйста, обратите внимание, что если оставить префиксы в вашем CSS коде, Autoprefixer удалит их во время компиляции, если они не нужны для браузеров, указанных в browserslist.

Полный список поддерживаемых значений для browserslist можно найти здесь .

Ответил 09/10/2019 в 13:42
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more