Skip to content

Commit 690adcf

Browse files
Annie-HuangAnnie-Huang
committed
Test scss file with background image. Working. Make modification so all three location: 1.local demo, 2.storybook, 3.publish package worked as well. (should have test this in the convert-css-scss branch). It's a ugly solution, people already raise it. (angular/angular-cli#4778). See if you can improve in the future.
1 parent ba949e9 commit 690adcf

7 files changed

Lines changed: 43 additions & 14 deletions

File tree

‎Note.txt‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,23 @@ https://www.learnstorybook.com/
99
https://github.com/storybooks/storybook/issues/125
1010
https://github.com/storybooks/storybook/issues/4481
1111
D:\Temp\Test\car-show>npx -p @storybook/cli sb init
12+
https://github.com/angular/angular-cli/issues/4778
1213

1314

1415
How to create a component:
1516
#################################
1617
(For component itself...)
1718
===========================
1819
- In D:\Temp\ea-component-library\src\app\components\, create your component folder. E.g. button. And add the following files:
19-
* button.css
20+
* button.scss
2021
* button.spec.ts
2122
* button.ts
23+
* If your button.scss refers to an image, put the images into D:\Temp\ea-component-library\src\images and put url as relative path. E.g. url('image/xxx.png')
24+
(Note: src\images is set as assets in angular.json. During the "build-redistribute", the whole src\images will be copy into resource\images folder so the relative path in eauicomp.css works)
25+
2226

2327
- In D:\Temp\ea-component-library\src\assets\showcase\css\eauicomp.css, E.g.
24-
@import '../../../app/components/button/button.css';
28+
@import '../../../app/components/button/button.scss';
2529

2630
- In D:\Temp\ea-component-library\exports, create the component files:
2731
* button.js
@@ -61,7 +65,7 @@ How to create a component:
6165

6266
Files that don't need to be touched
6367
=======================================
64-
- D:\Temp\ea-component-library\resources\eauicomp.css. From the gulp task, it was taking out from common.css and each component's css files and concat into eauicomp.css and put into resource folder.
68+
- D:\Temp\ea-component-library\resources\eauicomp.css. From the gulp task, it was taking out from common.scss and each component's scss files, compiled them into css and concat into eauicomp.css and put into resource folder.
6569

6670

6771
How to build production build:

‎angular.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"tsConfig": "src/tsconfig.app.json",
2525
"assets": [
2626
"src/favicon.png",
27+
"src/images",
2728
"src/assets",
2829
"src/upload.php"
2930
],
@@ -33,7 +34,7 @@
3334
"node_modules/primeicons/primeicons.css",
3435
"node_modules/primeflex/primeflex.css",
3536
"node_modules/font-awesome/css/font-awesome.min.css",
36-
"src/scss/styles.scss"
37+
"src/styles.scss"
3738
],
3839
"scripts": [
3940
"./node_modules/moment/moment.js",
@@ -89,7 +90,7 @@
8990
"tsConfig": "src/tsconfig.spec.json",
9091
"karmaConfig": "src/karma.conf.js",
9192
"styles": [
92-
"src/scss/styles.scss"
93+
"src/styles.scss"
9394
],
9495
"scripts": [],
9596
"assets": [

‎gulpfile.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,7 @@ gulp.task('copy-component-scss', function () {
6666

6767
gulp.task('copy-global-scss', function () {
6868
gulp.src([
69-
'src/scss/*.scss',
70-
'!src/scss/styles.scss'
69+
'src/scss/*.scss'
7170
])
7271
.pipe(gulp.dest('resources/scss'));
7372
});
@@ -80,9 +79,17 @@ gulp.task('build-component-css', function () {
8079
.pipe(gulp.dest('resources/components'));
8180
});
8281

82+
83+
// // Backup for original images task
84+
// gulp.task('images', function() {
85+
// return gulp.src(['src/app/components/**/images/*.png', 'src/app/components/**/images/*.gif'])
86+
// .pipe(flatten())
87+
// .pipe(gulp.dest('resources/images'));
88+
// });
89+
90+
8391
gulp.task('images', function() {
84-
return gulp.src(['src/app/components/**/images/*.png', 'src/app/components/**/images/*.gif'])
85-
.pipe(flatten())
92+
return gulp.src(['src/images/**/*'])
8693
.pipe(gulp.dest('resources/images'));
8794
});
8895

‎src/app/components/button/button.scss‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
1-
//@import "~src/scss/variables";
21
@import "../../../scss/variables";
32

43
.ea-button {
5-
background-color: $background-color;
4+
background: $background-color url("images/rock_01_png___by_alzstock-d5r84up.png");
65
color: $font-color;
76
height: 3em;
87
font-size: 14px;
98
outline: none;
109
}
10+
11+
//.ea-button0 {
12+
// background-color: $background-color;
13+
// color: $font-color;
14+
// height: 3em;
15+
// font-size: 14px;
16+
// outline: none;
17+
// background-image: url('app/components/button/rock_01_png___by_alzstock-d5r84up.png');
18+
//}
19+
//
20+
//.ea-button1 {
21+
// background-color: $background-color;
22+
// color: $font-color;
23+
// height: 3em;
24+
// font-size: 14px;
25+
// outline: none;
26+
// background-image: url('assets/components/images/1rock_01_png___by_alzstock-d5r84up.png');
27+
//}

‎src/images/rock_01_png___by_alzstock-d5r84up.png‎

30.6 KB
Loading

‎src/scss/styles.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/styles.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "assets/showcase/css/eauicomp";
2+
@import "assets/showcase/css/code";
3+
@import "assets/showcase/css/site";

0 commit comments

Comments
 (0)