Content_css not being loaded correctly about tinymce-angular

[knowrama]

Same problem here while dealing with styles. I am using Angular 4.2.5 with Copy Web Pack plugin v 4.0.1.
Can anyone help with resolving this.. Thanks.

[fyrkant]

You can't load a sass file into tinymce, so that will never work.

[tjaartvanderWalt]

I am posting my work-around here if anyone else has the need to compile there .sass files to .css and use it in tinymce

1. Create a gulp file with a task to compile the .sass file to .css
2. Add the gulp file to be called when the ng-build or ng-serve command fires
3. Point the content_css property to the compiled .css file

Here is my gulp file, replace $project_id with your project name

'use strict';
var args = getCommandLineArguments(process.argv);

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

gulp.task('tinymcesass', function () {
    return gulp.src('./src/assets/sass/tinymce.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(isProd(args.env) ? './dist/$project_id/assets/' : './src/assets/'));
});

gulp.task('tinymcesass:watch', function () {
    gulp.watch('./src/assets/sass/tinymce.scss', ['tinymcesass']);
});

gulp.task('tinymce', ['tinymcesass']);

// https://www.sitepoint.com/pass-parameters-gulp-tasks/
// fetch command line arguments
function getCommandLineArguments(argList) {

    let arg = {}, a, opt, thisOpt, curOpt;
    for (a = 0; a < argList.length; a++) {

        thisOpt = argList[a].trim();
        opt = thisOpt.replace(/^\-+/, '');

        if (opt === thisOpt) {

            // argument value
            if (curOpt) arg[curOpt] = opt;
            curOpt = null;

        }
        else {

            // argument name
            curOpt = opt;
            arg[curOpt] = true;

        }

    }

    return arg;
}

function isProd(env) { 
    return env === 'prod';
}

Here is my package.json script section:

"prestart": "gulp tinymce --env dev",
"start": "ng serve",
"build": "ng build",   
"postbuild": "gulp tinymce --env prod",

The --env argument is so that the .css file ends up in the correct location for when you are running locally or production

Here is my config object

{
    skin_url: '/assets/plugins/tinymce/skins/lightgray',
    content_css: `/assets/tinymce.css?v=${Date.now()}`,
    height: '480',
    branding: false,                       
}

Date.now() is used for cache busting.

[tjaartvanderWalt]

Same problem here while dealing with styles. I am using Angular 4.2.5 with Copy Web Pack plugin v 4.0.1.
Can anyone help with resolving this.. Thanks.

Please see my proposed work-around