This is an example of the problematic SCSS:
ellipse.stand {
fill: $light-blue;
test: 1;
rx: 8;
ry: 3;
@if $home {
transform: translate(0, 25vh) rotate(-5deg);
}
}
With a development build, this is the resulting CSS:
.page.home>.bg>div.dark svg g.doodle.monitor ellipse.stand {
fill: #a3c4cb;
test: 1;
rx: 8;
ry: 3;
-webkit-transform: translate(0,25vh) rotate(-5deg);
transform: translate(0,25vh) rotate(-5deg);
}
But with ng build --prod, this is the resulting CSS:
.page.home>.bg>div.dark svg g.doodle.monitor ellipse.stand {
fill: #a3c4cb;
test: 1;
-webkit-transform: translate(0,25vh) rotate(-5deg);
transform: translate(0,25vh) rotate(-5deg);
}
As you can see, I intentionally added an invalid style (test: 1) in this example to test if this had something to do with unknown properties, but this appears to be specific to SVG geometry properties.
This is what my angular build config looks like:
{
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/www",
"index": "src/index.html",
"main": "src/main.ts",
"resourcesOutputPath": "resources",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/.htaccess",
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles/global.scss",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
}
}
}
The only relevant existing question I've found for this issue is this: Angular-cli ng build --prod is stripping a unknown CSS property from my CSS, how can i force ignore
I've tried changing the extractCss setting as suggested in the comments, but it had no effect, and unlike the in the question above, I do not get any warnings from the compiler about invalid property names.
I've been stumped by this one for a few days now. Anyone know how I can keep Angular from clobbering my SVG styling?
from Angular --prod build strips SVG properties from compiled CSS
No comments:
Post a Comment