règles CSS s'omises après transpiling dans 8 angulaire

voix
0

Je mis à jour ma demande de 2 à Angulaire angulaire 8. J'ai remarqué quelques règles CSS sont omis après transpiling le code. Ci-dessous mon package.json, tsconfig.json et 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
              }
            ]
          }
        }
      }
    }
  }
}

règle CSS réelle est comme ça dans CellContainer.css (inclus dans les styles de 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);
  }

Mais après transpiling le code, il devient:

.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);
  }

Vous pouvez voir les règles pour Chrome et Firefox sont supprimés. Si je change juste l'ordre, et de mettre la règle pour le chrome dans le dernier, puis cette règle reste. Le problème est que la dernière règle est inclus et reste sont supprimés.

.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;
      }

Devient

.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;
      }

J'ai essayé de changer mon objectif, le module dans le TSconfig à es2015, rien ne fonctionnait. Comment assurez-vous que toutes les règles sont présentes dans le code transpiled.

Créé 09/10/2019 à 12:54
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
2

La CLI angulaire utilise Autoprefixer pour préfixer règles CSS spécifiques au navigateur.

Un guide pour la mise en place d' un ensemble de règles à l' aide browserslist se trouve dans la documentation officielle angulaire :

Vous pouvez dire ce que les navigateurs Autoprefixer à cibler en ajoutant une propriété browserslist dans le fichier de configuration de package, package.json:

Donc , il suffit d' ajouter la spécification des navigateurs que vous souhaitez soutenir votre package.json, par exemple:

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

Vous pouvez supprimer le vendeur manuel préfixant de votre CSS codebase, Autoprefixer prendra soin de cela dans le processus de construction.

S'il vous plaît noter que si vous laissez préfixes fournisseurs dans votre CSS codebase, Autoprefixer va supprimer ces pendant la compilation si elles ne sont pas nécessaires pour les navigateurs spécifiés dans le browserslist.

Une liste complète des valeurs prises en charge pour browserslist se trouve ici .

Créé 09/10/2019 à 13:42
source utilisateur

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