CSS-regels krijgen weggelaten na transpiling in Angular 8

stemmen
0

Ik mijn toepassing van Angular 2 upgrade naar Angular 8. merkte ik enkele CSS-regels worden weggelaten na transpiling de code. Hieronder is mijn package.json, tsconfig.json en 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
              }
            ]
          }
        }
      }
    }
  }
}

Werkelijke CSS-regel is als dit in CellContainer.css (inbegrepen in de stijlen van 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);
  }

Maar na transpiling de code, wordt het:

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

U kunt zien dat de regels voor Chrome en Firefox worden verwijderd. Als ik gewoon de volgorde te wijzigen, en zet de regel voor chroom in de laatste, dan is die regel blijft. Het probleem is dus alleen de laatste regel is opgenomen en de rest wordt verwijderd.

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

Wordt

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

Ik probeerde het veranderen van mijn doel, module in de TSconfig om es2015, niets werkte. Hoe kan ik ervoor zorgen dat alle regels in de transpiled code zijn.

De vraag is gesteld op 09/10/2019 om 12:54
bron van user
In andere talen...                            


1 antwoorden

stemmen
2

De Angular CLI gebruikt Autoprefixer voor prefixing CSS-regels browser-specifiek.

Een gids voor het opzetten van een regelset met behulp browserslist kan worden gevonden in de officiële Angular documentatie :

U kunt Autoprefixer vertellen wat browsers te richten door het toevoegen van een browserslist woning aan de verpakking configuratiebestand package.json:

Zo voegt de specificatie van de browsers die u wilt ondersteunen om uw package.json, bijvoorbeeld:

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

U kunt de handleiding leverancier voorvoegsel van uw CSS codebase te verwijderen, zal Autoprefixer daarvoor zorgen in het bouwproces.

Houd er rekening mee dat als je vendor voorvoegsels achter in uw CSS code base, Autoprefixer zullen deze gedurende de compilatie te verwijderen als ze niet nodig zijn voor de in de browserslist browsers.

Een volledige lijst van ondersteunde waarden voor browserslist kan worden gevonden hier .

antwoordde op 09/10/2019 om 13:42
bron van user

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