webpack 资产在 Angular 2 CLI 项目中的位置

Question

我应该在哪里放置一般的、跨组件的 .css、.scss、.svg、.gif 等资产（例如，主题资源）在 Angular CLI (webpack) 项目，所以我的应用程序的开发和生产版本都可以正常工作而无需更改？

当我使用 ng new foo --styles=scss 和 Angular CLI (angular-cli: 1.0.0-beta.11-webpack.8, node: 6.5.0, os: linux x64) 生成一个新的 foo 项目时，将创建以下结构（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">）吗？

Answer 1

不确定这是否是您要查找的内容，但与其制作一个巨大的 .scss 文件，编译它并将其链接到 index.html，我建议使用 angular cli支持。

首先你需要通过 npm install node-sass --save-dev

安装 node-sass

那么你的组件应该是这样的

@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 编译器。祝你好运！

Answer 2

如果您迁移了现有项目，请在 src/ 下创建一个 styles.scss，该文件用于全局样式。您也可以将它们放在 app.component.scss

下

webpack 资产在 Angular 2 CLI 项目中的位置

Where do webpack assets go in an Angular 2 CLI project

assets

angular-cli

angular