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.

Author: Annie-Huang

Note.txt

@@ -9,19 +9,23 @@ https://www.learnstorybook.com/
 https://github.com/storybooks/storybook/issues/125
 https://github.com/storybooks/storybook/issues/4481
 D:\Temp\Test\car-show>npx -p @storybook/cli sb init
+https://github.com/angular/angular-cli/issues/4778
 
 
 How to create a component:
 #################################
 (For component itself...)
 ===========================
 - In D:\Temp\ea-component-library\src\app\components\, create your component folder. E.g. button. And add the following files:
-    * button.css
+    * button.scss
     * button.spec.ts
     * button.ts
+    * 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')
+      (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)
+
 
 - In D:\Temp\ea-component-library\src\assets\showcase\css\eauicomp.css, E.g.
-    @import '../../../app/components/button/button.css';
+    @import '../../../app/components/button/button.scss';
 
 - In D:\Temp\ea-component-library\exports, create the component files:
     * button.js
@@ -61,7 +65,7 @@ How to create a component:
 
 Files that don't need to be touched
 =======================================
-- 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.
+- 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.
 
 
 How to build production build:

angular.json

@@ -24,6 +24,7 @@
               "tsConfig": "src/tsconfig.app.json",
               "assets": [
                 "src/favicon.png",
+                "src/images",
                 "src/assets",
                 "src/upload.php"
               ],
@@ -33,7 +34,7 @@
                 "node_modules/primeicons/primeicons.css",
                 "node_modules/primeflex/primeflex.css",
                 "node_modules/font-awesome/css/font-awesome.min.css",
-                "src/scss/styles.scss"
+                "src/styles.scss"
               ],
               "scripts": [
                 "./node_modules/moment/moment.js",
@@ -89,7 +90,7 @@
               "tsConfig": "src/tsconfig.spec.json",
               "karmaConfig": "src/karma.conf.js",
               "styles": [
-                "src/scss/styles.scss"
+                "src/styles.scss"
               ],
               "scripts": [],
               "assets": [

gulpfile.js

@@ -66,8 +66,7 @@ gulp.task('copy-component-scss', function () {
 
 gulp.task('copy-global-scss', function () {
     gulp.src([
-        'src/scss/*.scss',
-        '!src/scss/styles.scss'
+        'src/scss/*.scss'
     ])
     .pipe(gulp.dest('resources/scss'));
 });
@@ -80,9 +79,17 @@ gulp.task('build-component-css', function () {
     .pipe(gulp.dest('resources/components'));
 });
 
+
+// // Backup for original images task
+// gulp.task('images', function() {
+//     return gulp.src(['src/app/components/**/images/*.png', 'src/app/components/**/images/*.gif'])
+//         .pipe(flatten())
+//         .pipe(gulp.dest('resources/images'));
+// });
+
+
 gulp.task('images', function() {
-    return gulp.src(['src/app/components/**/images/*.png', 'src/app/components/**/images/*.gif'])
-        .pipe(flatten())
+    return gulp.src(['src/images/**/*'])
         .pipe(gulp.dest('resources/images'));
 });
 

src/app/components/button/button.scss

@@ -1,10 +1,27 @@
-//@import "~src/scss/variables";
 @import "../../../scss/variables";
 
 .ea-button {
-    background-color: $background-color;
+    background: $background-color url("images/rock_01_png___by_alzstock-d5r84up.png");
     color: $font-color;
     height: 3em;
     font-size: 14px;
     outline: none;
 }
+
+//.ea-button0 {
+//    background-color: $background-color;
+//    color: $font-color;
+//    height: 3em;
+//    font-size: 14px;
+//    outline: none;
+//    background-image: url('app/components/button/rock_01_png___by_alzstock-d5r84up.png');
+//}
+//
+//.ea-button1 {
+//    background-color: $background-color;
+//    color: $font-color;
+//    height: 3em;
+//    font-size: 14px;
+//    outline: none;
+//    background-image: url('assets/components/images/1rock_01_png___by_alzstock-d5r84up.png');
+//}

src/images/rock_01_png___by_alzstock-d5r84up.png

@@ -0,0 +1,3 @@
+@import "assets/showcase/css/eauicomp";
+@import "assets/showcase/css/code";
+@import "assets/showcase/css/site";