Skip to content

Commit 1ea127b

Browse files
committed
chore(readme): update readme to make getting started more useful
1 parent 834d7bd commit 1ea127b

File tree

1 file changed

+49
-5
lines changed

1 file changed

+49
-5
lines changed

README.md

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,59 @@ An _Angular_ implementation of the Carbon Design System
33

44
### Getting started
55

6-
```
6+
Assuming we're starting with a new @angular/cli project:
7+
8+
```shell
79
$ npx @angular/cli new my-project
810
$ cd my-project
9-
$ npm i carbon-components-angular carbon-components
10-
$ # include carbon css
11-
$ # import components
12-
$ npm start
11+
$ npm i --save-dev carbon-components-angular carbon-components
12+
```
13+
14+
Then we need to rename `src/styles.css` to `src/styles.scss` and include carbon-components:
15+
16+
```scss
17+
@import "~carbon-components/scss/globals/scss/styles.scss";
1318
```
1419

20+
And make sure the `angular.json` is configured to pick up our new file:
21+
22+
```javascript
23+
// ...
24+
"projects": {
25+
"demo-project": {
26+
"root": "",
27+
"sourceRoot": "src",
28+
"projectType": "application",
29+
"prefix": "app",
30+
"schematics": {},
31+
"architect": {
32+
"build": {
33+
"builder": "@angular-devkit/build-angular:browser",
34+
"options": {
35+
"outputPath": "dist/demo-project",
36+
"index": "src/index.html",
37+
"main": "src/main.ts",
38+
"polyfills": "src/polyfills.ts",
39+
"tsConfig": "src/tsconfig.app.json",
40+
"assets": [
41+
"src/favicon.ico",
42+
"src/assets"
43+
],
44+
"styles": [
45+
"src/styles.scss" // <-- this line specifically
46+
],
47+
}
48+
}
49+
}
50+
}
51+
}
52+
// ...
53+
```
54+
55+
_Finally_ we can run `npm start` and start building out our application!
56+
57+
> *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` is our recommended setup.
58+
1559
#### Bundler
1660

1761
Your project should use a module bundler - we recommend [webpack](https://webpack.js.org/).

0 commit comments

Comments
 (0)