diff --git a/index.html.js b/index.html.js
index 6fcc51e659..6eee5eb98f 100644
--- a/index.html.js
+++ b/index.html.js
@@ -10,6 +10,7 @@ module.exports = function buildIndex(o) {
${o.qumu ? '' : ''}
+
diff --git a/package.json b/package.json
index 603cae4e2e..f1fb83859c 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
"end-to-end-testing-helpers": "^1.0.5",
"eslint": "6.6.0",
"eslint-plugin-react": "7.16.0",
+ "extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.11",
"git-rev-sync": "1.10.0",
"gridster": "0.5.6",
diff --git a/scripts/index.ts b/scripts/index.ts
index 0f8544901e..b2241312f4 100644
--- a/scripts/index.ts
+++ b/scripts/index.ts
@@ -1,4 +1,16 @@
+// extract-text-webpack-plugin messes up the import order
+// when importing from SCSS files, but it works when importing from js
+// if you need some styles to go at the top/bottom, import it here
+
import 'app.scss'; // styles
+
+import 'jquery-jcrop/css/jquery.Jcrop.css';
+import 'jquery-ui/themes/smoothness/jquery-ui.css';
+import 'medium-editor/dist/css/medium-editor.css';
+import 'medium-editor-tables/dist/css/medium-editor-tables.css';
+import 'owl.carousel/dist/assets/owl.carousel.min.css';
+import 'superdesk-ui-framework/dist/superdesk-ui.bundle.css';
+
import 'vendor';
import 'core';
import 'templates-cache.generated'; // generated by grunt 'ngtemplates' task
diff --git a/spec/_unstable-tests.txt b/spec/_unstable-tests.txt
index d1ebf0b52a..dde34d67f5 100644
--- a/spec/_unstable-tests.txt
+++ b/spec/_unstable-tests.txt
@@ -1,3 +1,6 @@
content can open package using hotkey ctrl+0
+authoring can send and publish
editor3 ctrl+z on tables mantains cursor position in the middle
monitoring can close already opened preview on an item action
+editor3 can edit body with toolbar
+monitoring can display the item in Desk Output when it's published in a production desk
diff --git a/styles/sass/app.scss b/styles/sass/app.scss
index 219e44ad98..81813ba779 100644
--- a/styles/sass/app.scss
+++ b/styles/sass/app.scss
@@ -1,4 +1,6 @@
-// NOTE: file extension is not needed for importing .scss files
+// extract-text-webpack-plugin messes up the import order
+// when importing from SCSS files, but it works when importing from js
+// if you need some styles to go at the top/bottom, import it from index.ts
// Roboto font import
@import url(//fonts.googleapis.com/css?family=Roboto+Mono:400,300,500,700,300italic,400italic,500italic,700italic&subset=latin,latin-ext);
@@ -52,14 +54,6 @@
// Components: Misc
@import 'labels';
-// Vendor
-@import '~jquery-jcrop/css/jquery.Jcrop.css';
-@import '~jquery-ui/themes/smoothness/jquery-ui.css';
-@import '~medium-editor/dist/css/medium-editor.css';
-@import '~medium-editor-tables/dist/css/medium-editor-tables.css';
-@import '~owl.carousel/dist/assets/owl.carousel.min.css';
-@import '~superdesk-ui-framework/dist/superdesk-ui.bundle.css';
-
@import 'medium-editor'; // custom skin for medium-editor
@import 'sf-additional';
@import 'sf-icons';
diff --git a/tasks/options/filerev.js b/tasks/options/filerev.js
index 83b172516f..a1b57d3f45 100644
--- a/tasks/options/filerev.js
+++ b/tasks/options/filerev.js
@@ -8,4 +8,8 @@ module.exports = {
src: '<%= distDir %>/*.js',
dest: '<%= distDir %>/',
},
+ css: {
+ src: '<%= distDir %>/*.css',
+ dest: '<%= distDir %>/',
+ },
};
diff --git a/webpack.config.js b/webpack.config.js
index 7e50fa050c..4e2ac78a9f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
var path = require('path');
var webpack = require('webpack');
var lodash = require('lodash');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
function countOccurences(_string, substring) {
return _string.split(substring).length - 1;
@@ -51,6 +52,9 @@ module.exports = function makeConfig(grunt) {
new webpack.DefinePlugin({
__SUPERDESK_CONFIG__: JSON.stringify(sdConfig),
}),
+ new ExtractTextPlugin({
+ filename: '[name].bundle.css',
+ }),
],
resolve: {
@@ -107,19 +111,29 @@ module.exports = function makeConfig(grunt) {
loader: 'html-loader',
},
{
- test: /\.css$/,
- use: [
- 'style-loader',
- 'css-loader',
- ],
- },
- {
- test: /\.scss$/,
- use: [
- 'style-loader',
- 'css-loader',
- 'sass-loader',
- ],
+ test: /\.(css|scss)$/i,
+ use: ExtractTextPlugin.extract({
+ fallback: [{
+ loader: 'style-loader',
+ options: {
+ sourceMap: true,
+ },
+ }],
+ use: [
+ {
+ loader: 'css-loader',
+ options: {
+ sourceMap: true,
+ },
+ },
+ {
+ loader: 'sass-loader',
+ options: {
+ sourceMap: true,
+ },
+ },
+ ],
+ }),
},
{
test: /\.json$/,