[SOLVED] How to compile all sass files into one css file?

Help Requests
1

Hello,

I’m trying to compile all sass files into a single CSS file which will be used as a global CSS file in the project. I’m using Aurelia CLI v1.3.1. I have the following structure.

-src
 --content
   --sass
      main.scss
   --css
      main.css

Tried the following approach
In the Aurelia.json file added a destination path where all the SASS will be compiled. As well modified process-css.ts file in the tasks folder. But when I try to build the project it generates some new folders which I don’t want.

process-css.ts File

import {build} from 'aurelia-cli';
import * as gulp from 'gulp';
import * as project from '../aurelia.json';
import * as sass from 'gulp-dart-sass';

export default function processCSS() {
  return gulp.src(project.cssProcessor.source, {sourcemaps: true})
   .pipe(sass.sync().on('error', sass.logError))
   .pipe(gulp.dest(project.cssProcessor.dtsSource))
   .pipe(build.bundle());

}

Aurelia.json file

    "cssProcessor": {
      "source": [
        "src/**/*.scss"
      ]
     "dtsSource:" [
       "src/content/css/main.css"
      ]
    }
2
1 Like
3

Note the default CLI-bundler setup bundles css contents inside JS module. When you deal with css yourself, you should remove .pipe(build.bundle()) after that gulp.dest. Otherwise your JS bundle files will be unnecessarily bigger.

This also means the JS at runtime has no knowledge where the css are, so that you cannot load css through JS like import "./path/to/all-css.css"; (that import requires css through a JS module, aka bundled).

You would need to load the final css in index.html like <link rel="stylesheet" href="/path/to/all-css.css">.

1 Like