在Angular 2 CLI项目中，webpack资源应该放在哪里?

Question

我应该把通用的，跨组件的.css, .scss, .svg, .gif等资产(例如，主题资源)放在Angular CLI (webpack)项目中，这样我的应用程序的开发和生产版本都可以正常工作而不需要更改?

当我用Angular CLI (angular-cli: 1.0.0-beta.11-webpack.8, node: 6.5.0, os: linux x64)使用ng new foo --styles=scss生成一个新的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

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

Answer 2

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

首先你需要通过执行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编译器。好运！