哪裏的WebPack資產走在角2 CLI項目

我應該在哪裏放置一般，跨組件.css，.scss，.svg，.gif，在角度CLI（的WebPack）項目等資產（例如，主題資源），這樣既我的應用程序的開發和生產版本能夠正常工作而不會發生變哪裏的WebPack資產走在角2 CLI項目

當我產生使用ng new foo --styles=scss新foo項目，Angular CLI（angular-cli: 1.0.0-beta.11-webpack.8, node: 6.5.0, os: linux x64），以下結構創建（與node_modules修剪）：

foo 
├── angular-cli.json 
├── config 
│   ├── karma.conf.js 
│   └── protractor.conf.js 
├── e2e 
│   ├── app.e2e-spec.ts 
│   ├── app.po.ts 
│   └── tsconfig.json 
├── node_modules 
├── package.json 
├── public 
├── README.md 
├── src 
│   ├── app 
│   │   ├── app.component.css 
│   │   ├── app.component.html 
│   │   ├── app.component.spec.ts 
│   │   ├── app.component.ts 
│   │   ├── app.module.ts 
│   │   ├── environments 
│   │   │   ├── environment.dev.ts 
│   │   │   ├── environment.prod.ts 
│   │   │   └── environment.ts 
│   │   ├── index.ts 
│   │   └── shared 
│   │    └── index.ts 
│   ├── favicon.ico 
│   ├── index.html 
│   ├── main.ts 
│   ├── polyfills.ts 
│   ├── test.ts 
│   ├── tsconfig.json 
│   └── typings.d.ts 
└── tslint.json

的public區域似乎是合理的，但怎麼樣.scss文件？ src/app/public似乎也很合理，但是允許開發和生產版本正確工作的正確目錄是什麼？

文件引用應該在HTML和SCSS文件中看起來像什麼？它們都是基於SCSS文件中源佈局的相對路徑（例如@import '../scss/layout';）和HTML文件中的絕對路徑（例如，<link href="/assets/css/main.css" rel="stylesheet">）？

來源

2016-09-01 Jan Nielsen

如果您遷移了現有項目，請在src/下創建styles.scss，該文件適用於全局樣式。你也可以把它們放在app.component.scss

來源

2016-09-14 18:46:40

謝謝@Robert - 我該如何處理一組'.scss'「全局」風格的文件？ –

我會在styles.scss文件中使用import語句。 '@import'/path/to/file.scss';' –

不知道這是你在找什麼，而不是讓一個巨大的.scss文件，編譯它並將其鏈接到index.html，我會建議使用角度cli scss支持。

首先，你需要做npm install node-sass --save-dev

安裝節點青菜那麼你的組件應該是這樣的

@Component({ 
templateUrl: 'file.html', 
directives: [your-directives], 
styleUrls: ['path/to/file.scss'] // (or just ['file.scss'] in the same directory

當你ng serve或ng build或不管它只是自動編譯SCSS文件。

當然會將您的app.component.css更改爲app.component.scss。無需使用指南針或任何其他scss編譯器。祝你好運！

來源

2016-09-06 18:39:06

謝謝，@Abu Barrett - 更多的一般資源如主題定義等跨組件？我會更新我的問題，使其更清楚。 –

現在angular-cli相當未完成，直到webpack.2版本，公共文件夾工作服務全球文件（在不久的將來，我相信他們會解決它）。是的，有時您需要全球scss資產。如果你在談論scss，你可以將一個全局scss導入到你的特定組件scss文件中。例如在應用程序文件夾內，你可以創建一個「styles」文件夾，並有一個_shared.scss文件，並將其導入組件scss文件中，如下所示：@import'../styles/shared'; –

哪裏的WebPack資產走在角2 CLI項目

回答

相關問題