angular-cli包的css怎麼樣？

Question

我正在努力使用angular-cli和webpack將Angular 2項目轉換爲Angular 4。我遇到從我的scss文件訪問圖像資產的問題。我相信我的問題是由於我的scss文件的目錄結構被壓扁造成的。在我的項目的src目錄中，我有一個stlyes子目錄和一個assets子目錄（這是styles目錄的同級）。這兩個目錄都有嵌套的子目錄。我目前認爲assets目錄在打包時會保留其子目錄結構，並且styles目錄被展平，從而導致對平展化的css的資產的相對引用不正確。

例如/src/styles/partials/_sprite.scss：

.icon { 
    background: url("../../assets/images/sprite-svg-ui.svg") no-repeat; 
} 

在我的IDE這個參考解析正確的，但是當被angular-cli我收到以下錯誤內置：

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 

這是我的.angular-cli.json文件：

{ 
    "$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 
    } 
    } 
} 

這裏是

// 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'; 

更新1

我已經發現，通過絕對路徑/app/assets/images/引用的圖像資產允許建立解決圖像文件：.angular-cli.json文件的apps\styles元素內內我index.scss文件中引用，但現在在我的IDE中對圖像文件的引用是無效的...

當運行帶絕對路徑/app/assets/images/的應用程序時，我在加載時得到一個404圖像文件...

更新2

我在.angular-cli.json到""改變了prefix參數，然後從我的/src/styles/partials/_sprite.scss文件我引用使用絕對路徑/assets/images/我的形象資產，例如：

.icon-close { 
    background: url("/assets/images/close.svg") no-repeat; 
    width: 24px; 
    height: 24px; 
} 

我的IDE仍然無法解析圖像文件...但至少它構建並執行。

Answer 1

我遇到了這個問題，我通過將圖像的絕對路徑取決於「index.scss」文件的位置來解決這個問題，而不依賴於導入的子文檔「_sprite.scss」 。這會給你一個來自IDE的參考錯誤的錯誤，但它會起作用，你不會從webpack得到錯誤。我希望它有幫助。