Angular 7 在 SCSS 中去除重复属性

huangapple go评论100阅读模式
英文:

Angular 7 stripping out duplicate properties in SCSS

问题

Here is the code you provided with the requested translations:

Angular SASS (`.scss`) stripping out properties. How do I prevent this so I can embed duplicate properties for cross-browser compatibility?

To duplicate, create a new angular 7.2 project

{
   "name": "default-app",
   "version": "0.0.0",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
      "@angular/animations": "~7.2.0",
      "@angular/common": "~7.2.0",
      "@angular/compiler": "~7.2.0",
      "@angular/core": "~7.2.0",
      "@angular/forms": "~7.2.0",
      "@angular/platform-browser": "~7.2.0",
      "@angular/platform-browser-dynamic": "~7.2.0",
      "@angular/router": "~7.2.0",
      "core-js": "^2.5.4",
      "rxjs": "~6.3.3",
      "tslib": "^1.9.0",
      "zone.js": "~0.8.26"
   },
   "devDependencies": {
      "@angular-devkit/build-angular": "~0.13.0",
      "@angular/cli": "~7.3.9",
      "@angular/compiler-cli": "~7.2.0",
      "@angular/language-service": "~7.2.0",
      "@types/node": "~8.9.4",
      "@types/jasmine": "~2.8.8",
      "@types/jasminewd2": "~2.0.3",
      "codelyzer": "~4.5.0",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~4.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~3.2.2"
   }
}

Add a "teststyle" class to any element in a component.

<div style="text-align:center" class="teststyle">Hello
</div>
<router-outlet></router-outlet>

In the component's corresponding .scss file apply

.teststyle
{
   background: #a64bf4;
   background: -webkit-linear-gradient(right, #6ab443, #04a95f, #00d421);
   background: -o-linear-gradient(right, #6ab443, #04a95f, #00d421);
   background: -moz-linear-gradient(right, #6ab443, #04a95f, #00d421);
   background: linear-gradient(right, #6ab443, #04a95f, #00d421);
}

The angular pre-processor strips out everything except the first property and last property.
The corresponding CSS looks like this. -webkit-linear-gradient, -o-linear-gradient, and -moz-linear-gradient are not in the transpiled CSS/JS file. This is a transpilation issue, not a browser issue.

When I use straight CSS I see this, which is correct.

Also including angular.json

{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
      "default-app": {
         "root": "",
         "sourceRoot": "src",
         "projectType": "application",
         "prefix": "app",
         "schematics": {
            "@schematics/angular:component": {
               "style": "scss"
            }
         },
         "architect": {
            "build": {
               "builder": "@angular-devkit/build-angular:browser",
               "options": {
                  "outputPath": "dist/default-app",
                  "index": "src/index.html",
                  "main": "src/main.ts",
                  "polyfills": "src/polyfills.ts",
                  "tsConfig": "src/tsconfig.app.json",
                  "assets": [
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles": [
                     "src/styles.scss"
                  ],
                  "scripts": [],
                  "es5BrowserSupport": true
               },
               "configurations": {
                  "production": {
                     "fileReplacements": [
                        {
                           "replace": "src/environments/environment.ts",
                           "with": "src/environments/environment.prod.ts"
                        }
                     ],
                     "optimization": true,
                     "outputHashing": "all",
                     "sourceMap": false,
                     "extractCss": true,
                     "namedChunks": false,
                     "aot": true,
                     "extractLicenses": true,
                     "vendorChunk": false,
                     "buildOptimizer": true,
                     "budgets": [
                        {
                           "type": "initial",
                           "maximumWarning": "2mb",
                           "maximumError": "5mb"
                        }
                     ]
                  }
               }
            },
            "serve": {
               "builder": "@angular-devkit/build-angular:dev-server",
               "options": {
                  "browserTarget": "default-app:build"
               },
               "configurations": {
                  "production": {
                     "browserTarget": "default-app:build:production"
                  }
               }
            },
            "extract-i18n": {
               "builder": "@angular-devkit/build-angular:extract-i18n",
               "options": {
                  "browserTarget": "default-app:build"
               }
            },
            "test": {
               "builder": "@angular-devkit/build-angular:karma",
               "options": {
                  "main": "src/test.ts",
                  "polyfills": "src/polyfills.ts",
                  "tsConfig": "src/tsconfig.spec.json",
                  "karmaConfig": "src/karma.conf.js",
                  "styles": [
                     "src/styles.scss"
                  ],
                  "scripts": [],
                  "assets": [
                     "src/favicon.ico",
                     "src/assets"
                  ]
               }
            },
            "lint": {
               "builder": "@angular-devkit/build-angular:tslint",
               "options": {
                  "tsConfig": [
                     "src/tsconfig.app.json",
                     "src/tsconfig.spec.json"
                  ],
                  "exclude": [
                     "**/node_modules/**"
                  ]
               }
            }
         }
      },
      "default-app-e2e": {
         "root": "e2e/",
         "projectType": "application",
         "prefix": "",
         "architect": {
            "e2e": {
               "builder": "@angular-devkit/build-angular:protractor

<details>
<summary>英文:</summary>

Angular SASS (`.scss`) stripping out properties.  How do I prevent this so I can embed duplicate properties for cross browser compatibility? 

To duplicate, create a new angular 7.2 project

```lang-json
{
      &quot;name&quot;: &quot;default-app&quot;,
      &quot;version&quot;: &quot;0.0.0&quot;,
      &quot;scripts&quot;: {
        &quot;ng&quot;: &quot;ng&quot;,
        &quot;start&quot;: &quot;ng serve&quot;,
        &quot;build&quot;: &quot;ng build&quot;,
        &quot;test&quot;: &quot;ng test&quot;,
        &quot;lint&quot;: &quot;ng lint&quot;,
        &quot;e2e&quot;: &quot;ng e2e&quot;
      },
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;@angular/animations&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/common&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/compiler&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/core&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/forms&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/platform-browser&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/router&quot;: &quot;~7.2.0&quot;,
        &quot;core-js&quot;: &quot;^2.5.4&quot;,
        &quot;rxjs&quot;: &quot;~6.3.3&quot;,
        &quot;tslib&quot;: &quot;^1.9.0&quot;,
        &quot;zone.js&quot;: &quot;~0.8.26&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@angular-devkit/build-angular&quot;: &quot;~0.13.0&quot;,
        &quot;@angular/cli&quot;: &quot;~7.3.9&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;~7.2.0&quot;,
        &quot;@angular/language-service&quot;: &quot;~7.2.0&quot;,
        &quot;@types/node&quot;: &quot;~8.9.4&quot;,
        &quot;@types/jasmine&quot;: &quot;~2.8.8&quot;,
        &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
        &quot;codelyzer&quot;: &quot;~4.5.0&quot;,
        &quot;jasmine-core&quot;: &quot;~2.99.1&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
        &quot;karma&quot;: &quot;~4.0.0&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
        &quot;karma-coverage-istanbul-reporter&quot;: &quot;~2.0.1&quot;,
        &quot;karma-jasmine&quot;: &quot;~1.1.2&quot;,
        &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
        &quot;protractor&quot;: &quot;~5.4.0&quot;,
        &quot;ts-node&quot;: &quot;~7.0.0&quot;,
        &quot;tslint&quot;: &quot;~5.11.0&quot;,
        &quot;typescript&quot;: &quot;~3.2.2&quot;
      }
    }

Add a "teststyle" class to any element in a component.

&lt;div style=&quot;text-align:center&quot; class=&quot;teststyle&quot;&gt;Hello
&lt;/div&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;

In the component's corresponding .scss file apply

.teststyle
{
background: #a64bf4;
background: -webkit-linear-gradient(right, #6ab443, #04a95f, #00d421);
background: -o-linear-gradient(right, #6ab443, #04a95f, #00d421);
background: -moz-linear-gradient(right, #6ab443, #04a95f, #00d421);
background: linear-gradient(right, #6ab443, #04a95f, #00d421);
}

The angular pre-processor strips out everything except the first property and last property.
The corresponding css looks like this. -webkit-linear-gradient, -o-linear-gradient and -moz-linear-gradient are not int he transpiled css/js file. This is a tarnspilation issue, not a browser issue.
Angular 7 在 SCSS 中去除重复属性

When I use straight css I see this, which is correct.

Angular 7 在 SCSS 中去除重复属性

Also including angular.json

{
&quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
&quot;version&quot;: 1,
&quot;newProjectRoot&quot;: &quot;projects&quot;,
&quot;projects&quot;: {
&quot;default-app&quot;: {
&quot;root&quot;: &quot;&quot;,
&quot;sourceRoot&quot;: &quot;src&quot;,
&quot;projectType&quot;: &quot;application&quot;,
&quot;prefix&quot;: &quot;app&quot;,
&quot;schematics&quot;: {
&quot;@schematics/angular:component&quot;: {
&quot;style&quot;: &quot;scss&quot;
}
},
&quot;architect&quot;: {
&quot;build&quot;: {
&quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
&quot;options&quot;: {
&quot;outputPath&quot;: &quot;dist/default-app&quot;,
&quot;index&quot;: &quot;src/index.html&quot;,
&quot;main&quot;: &quot;src/main.ts&quot;,
&quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
&quot;tsConfig&quot;: &quot;src/tsconfig.app.json&quot;,
&quot;assets&quot;: [
&quot;src/favicon.ico&quot;,
&quot;src/assets&quot;
],
&quot;styles&quot;: [
&quot;src/styles.scss&quot;
],
&quot;scripts&quot;: [],
&quot;es5BrowserSupport&quot;: true
},
&quot;configurations&quot;: {
&quot;production&quot;: {
&quot;fileReplacements&quot;: [
{
&quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
&quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
}
],
&quot;optimization&quot;: true,
&quot;outputHashing&quot;: &quot;all&quot;,
&quot;sourceMap&quot;: false,
&quot;extractCss&quot;: true,
&quot;namedChunks&quot;: false,
&quot;aot&quot;: true,
&quot;extractLicenses&quot;: true,
&quot;vendorChunk&quot;: false,
&quot;buildOptimizer&quot;: true,
&quot;budgets&quot;: [
{
&quot;type&quot;: &quot;initial&quot;,
&quot;maximumWarning&quot;: &quot;2mb&quot;,
&quot;maximumError&quot;: &quot;5mb&quot;
}
]
}
}
},
&quot;serve&quot;: {
&quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
&quot;options&quot;: {
&quot;browserTarget&quot;: &quot;default-app:build&quot;
},
&quot;configurations&quot;: {
&quot;production&quot;: {
&quot;browserTarget&quot;: &quot;default-app:build:production&quot;
}
}
},
&quot;extract-i18n&quot;: {
&quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
&quot;options&quot;: {
&quot;browserTarget&quot;: &quot;default-app:build&quot;
}
},
&quot;test&quot;: {
&quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
&quot;options&quot;: {
&quot;main&quot;: &quot;src/test.ts&quot;,
&quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
&quot;tsConfig&quot;: &quot;src/tsconfig.spec.json&quot;,
&quot;karmaConfig&quot;: &quot;src/karma.conf.js&quot;,
&quot;styles&quot;: [
&quot;src/styles.scss&quot;
],
&quot;scripts&quot;: [],
&quot;assets&quot;: [
&quot;src/favicon.ico&quot;,
&quot;src/assets&quot;
]
}
},
&quot;lint&quot;: {
&quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
&quot;options&quot;: {
&quot;tsConfig&quot;: [
&quot;src/tsconfig.app.json&quot;,
&quot;src/tsconfig.spec.json&quot;
],
&quot;exclude&quot;: [
&quot;**/node_modules/**&quot;
]
}
}
}
},
&quot;default-app-e2e&quot;: {
&quot;root&quot;: &quot;e2e/&quot;,
&quot;projectType&quot;: &quot;application&quot;,
&quot;prefix&quot;: &quot;&quot;,
&quot;architect&quot;: {
&quot;e2e&quot;: {
&quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
&quot;options&quot;: {
&quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
&quot;devServerTarget&quot;: &quot;default-app:serve&quot;
},
&quot;configurations&quot;: {
&quot;production&quot;: {
&quot;devServerTarget&quot;: &quot;default-app:serve:production&quot;
}
}
},
&quot;lint&quot;: {
&quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
&quot;options&quot;: {
&quot;tsConfig&quot;: &quot;e2e/tsconfig.e2e.json&quot;,
&quot;exclude&quot;: [
&quot;**/node_modules/**&quot;
]
}
}
}
}
},
&quot;defaultProject&quot;: &quot;default-app&quot;
}

答案1

得分: 1

Angular使用Autoprefixer来添加所需的供应商前缀并移除不需要的前缀。基本上,你不需要担心添加任何前缀,因为它们会自动添加给你。被移除的前缀是因为它们不需要。

查看:https://caniuse.com/?search=linear-gradient 以获取使用和支持信息。

  • -webkit-linear-gradient 仅需要在以下情况下使用:

    • Chrome 4-25(2010年至2013年发布) - 全球浏览器占比0%
    • Safari 4-6.1(2010年至2013年发布) - 全球浏览器占比0.01%
    • iOS Safari 3.2-6.1(2010年至2013年发布) - 全球浏览器占比0.01%
    • Android浏览器 2.1-4.3(2009年至2013年发布) - 全球浏览器占比0.13%
  • -o-linear-gradient 仅需要在 Opera 11.5 和 Opera mobile 12(2011年至2012年发布)中使用,全球浏览器占比0%。

  • -moz-linear-gradient 仅需要在 Firefox 3.5-15(2010年至2012年发布)中使用,浏览器占比0.01%。

如果你仍然希望/需要在2018年发布的Angular版本中为已有10年历史且使用率为0%的浏览器提供支持,你可以简单地添加一个src/browserslist文件(相关问题请参考这里),你可以在这里阅读关于该文件格式的信息

英文:

Angular uses Autoprefixer to add any needed vendor prefixes and remove unneeded ones. Basically you don't need to worry about adding any since they will be added for you. The ones that are being removed are because they are not needed.

Check out: https://caniuse.com/?search=linear-gradient for usage and support

  • -webkit-linear-gradient is only needed for

    • Chrome 4-25 (released 2010-2013) - 0% worldwide browsers
    • Safari 4-6.1 (released 2010-2013) - 0.01% worldwide browsers
    • iOS Safari 3.2-6.1 (released 2010-2013) - 0.01% worldwide browsers
    • Android browser 2.1-4.3 (released 2009-2013) - 0.13% worldwide browsers
  • -o-linear-gradient is only needed for Opera 11.5 and Opera mobile 12 (released 2011-2012) which is 0% of worldwide browsers

  • -moz-linear-gradient is only needed for Firefox 3.5-15 (released 2010-2012) which is 0.01% of browsers


If you still want/need to support CSS gradients for 10+ year old browsers with 0% usage in a version of Angular that came out in 2018 you can just add a src/browserslist file (related question here) which you can read about that file format here

huangapple
  • 本文由 发表于 2023年7月20日 20:24:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/76729838.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定