सीएसएस नियम कोणीय 8 में transpiling के बाद छोड़ा गया हो रही है

वोट
0

मैं कोणीय 8 कोणीय 2 से अपने आवेदन के लिए उन्नत मैंने देखा कुछ सीएसएस नियम कोड 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;
      }

मैं es2015 को tsconfig में मेरा लक्ष्य, मॉड्यूल को बदलने की कोशिश की, कुछ भी नहीं काम किया। कैसे सुनिश्चित करें कि सभी नियमों transpiled कोड में मौजूद हैं बनाने के लिए।

09/10/2019 को 12:54
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
2

कोणीय CLI का उपयोग करता Autoprefixer ब्राउज़र-विशिष्ट सीएसएस नियम लगाकर लिए।

एक नियम-सेट का उपयोग कर स्थापित करने के लिए एक गाइड browserslist में पाया जा सकता आधिकारिक कोणीय प्रलेखन :

आप Autoprefixer बता सकते हैं क्या ब्राउज़र पैकेज विन्यास फाइल, package.json करने के लिए एक browserslist संपत्ति जोड़कर लक्षित करने के लिए:

तो बस ब्राउज़रों आप अपने लिए समर्थन करना चाहते हैं के विनिर्देश जोड़ने package.jsonउदाहरण के लिए,:

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

आप मैन्युअल विक्रेता अपने सीएसएस codebase से लगाकर निकाल सकते हैं, Autoprefixer निर्माण प्रक्रिया में इस बात का ध्यान रखना होगा।

कृपया ध्यान दें कि अगर आप अपने सीएसएस codebase में विक्रेता उपसर्गों छोड़ देते हैं, 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