Question

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

当我使用foo使用Angular CLI（angular-cli: 1.0.0-beta.11-webpack.8, node: 6.5.0, os: linux x64）生成新的ng new foo --styles=scss项目时，会创建以下结构（修剪node_modules）：< / p>

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

Answer 2

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

之下

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

2 个答案: