How does the angular-cli package css? - css

Question

I am struggling to convert an Angular 2 project to Angular 4 using angular-cli and webpack. I am running into an issue accessing image assets from my scss files. I believe that my problem is being caused by the way that the directory structure of my scss files are being flattened. Within the src directory of my project I have a stlyes sub-directory and an assets sub-directory (which is a sibling of the styles directory). Both directories have nested child directories. My current belief in that the assets directory when packaged has keeps its sub-directory structure and the styles directory is flattened, thus causing relative references to assets from the flattened css to be incorrect.
For example /src/styles/partials/_sprite.scss:
.icon {
background: url("../../assets/images/sprite-svg-ui.svg") no-repeat;
}
Within my IDE this reference resolves correctly, but when built by the angular-cli I get the following error:
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles/index.scss
Module not found: Error: Can't resolve '../../assets/images/sprite-svg-ui.svg' in 'C:\Users\jhart\Desktop\pascal.ui\src\styles'
# ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles/index.scss 6:43140-43188
# ./src/styles/index.scss
# multi ./src/styles/index.scss
Here's my .angular-cli.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "ui"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets"
],
"index": "index.html",
"main": "index.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"./styles/index.scss"
],
"scripts": [
"dot.dot.dot.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {},
"serve": {
"port": 3000
}
}
}
Here's my index.scss file referenced within the within the apps\styles element of the .angular-cli.json file:
// globals
#import 'functions';
#import 'variables';
#import 'mixins';
#import 'base';
#import 'boxer';
// partials
#import 'partials/grid';
#import 'partials/sprite';
#import 'partials/typography';
#import 'partials/buttons';
#import 'partials/forms';
#import 'partials/tables';
#import 'partials/utility';
// vendors
// #import 'vendors/chosen';
#import 'vendors/chartist/chartist';
#import 'vendors/ng2-select';
// component (declarations)
#import 'partials/wrapper';
#import 'partials/header';
#import 'partials/navigation-primary';
#import 'partials/footer';
#import 'partials/upload-meter';
#import 'partials/pagination';
#import 'partials/breadcrumb';
#import 'partials/tabs';
#import 'partials/cards';
#import 'partials/badges';
#import 'partials/flyouts';
#import 'partials/comments';
#import 'partials/tutorial';
#import 'partials/year-selector';
#import 'partials/upload-window';
#import 'partials/panels';
#import 'partials/charts';
#import 'partials/lists';
#import 'partials/collapse';
#import 'partials/tooltips';
#import 'partials/login';
#import 'partials/settings';
#import '../app/modules/core/components/notification-banner/styles';
// component (declarations)
#import 'partials/cbcr-view';
// directives
#import '../app/modules/core/directives/menu/menu';
Update 1
I have discovered that referencing the image assets via an absolute path /app/assets/images/ allows build to resolve the image files, but now the reference to the image files within my IDE are invalid...
When running the application build with the absolute path /app/assets/images/ I get a 404 when loading an image file...
Update 2
I changed the prefix parameter in my .angular-cli.json to "" and then from my /src/styles/partials/_sprite.scss file I reference my image assets using an absolute path /assets/images/, for example:
.icon-close {
background: url("/assets/images/close.svg") no-repeat;
width: 24px;
height: 24px;
}
My IDE is still unable to resolve the images files... but at least it builds and executes.

Answer 1

I faced this problem and I solved it by putting the absolute path of the image depending on the location of the "index.scss" file in your case, not depending on the imported sub-sass file "_sprite.scss". This will give you an error a reference error from the IDE but it will work you won't get an error from webpack. I hope it helps.