reguli CSS obtinerea omise după transpiling în Angular 8

voturi
0

Am actualizat cererea mea de la 2 la angular angular 8. Am observat câteva reguli CSS sunt omise după transpiling codul. Mai jos este package.json mea, tsconfig.json și 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
              }
            ]
          }
        }
      }
    }
  }
}

regula actuală CSS este ca acest lucru în CellContainer.css (incluse în stilurile 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);
  }

Dar, după transpiling codul, devine:

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

Puteti vedea regulile pentru Chrome și Firefox sunt eliminate. Dacă aș schimba doar ordinea, și a pus regula de crom în ultima, atunci această regulă rămâne. Deci, problema este doar ultima regulă este inclusă și restul sunt eliminate.

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

devine

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

Am încercat schimbarea ținta mea, modul în tsconfig la es2015, nimic nu a lucrat. Cum să vă asigurați că toate regulile sunt prezente în codul transpiled.

Întrebat 09/10/2019 la 12:54
sursa de către utilizator
În alte limbi...                            


1 răspunsuri

voturi
2

Unghiulară CLI utilizează Autoprefixer pentru prefixarea reguli CSS specifice fiecărui browser.

Un ghid pentru crearea unui set de reguli folosind browserslist pot fi găsite în documentația oficială Angular :

Poti spune Autoprefixer ce browsere pentru a viza prin adăugarea unei proprietăți browserslist la fișierul de configurare pachet, package.json:

Deci , pur și simplu adăugați specificația browsere pe care doriți să le sprijine dumneavoastră package.json, de exemplu:

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

Aveți posibilitatea să eliminați vânzătorul manual prefixului de codebase CSS, Autoprefixer va avea grijă de faptul că, în procesul de construire.

Vă rugăm să rețineți că, dacă lăsați prefixe furnizor în codul de bază CSS, Autoprefixer va elimina aceste în timpul compilării în cazul în care acestea nu sunt necesare pentru browsere specificate în browserslist.

O listă completă de valori acceptate pentru browserslist pot fi găsite aici .

Publicat 09/10/2019 la 13:42
sursa de către utilizator

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