Repository: jhipster/generator-jhipster
Pull request #8283 (2018-09-11 14:46:00)

Use mini-css-extract-plugin
Extract-text-webpack-plugin is no longer recommended for CSS (See https://github.com/webpack-contrib/extract-text-webpack-plugin). We should use the mini-css-extract-plugin, as we do in Webpack.

- [ ] [Travis tests](https://travis-ci.org/jhipster/generator-jhipster/pull_requests) are green
- [ ] Tests are added where necessary
- [ ] Documentation is added/updated where necessary
- [ ] Coding Rules & Commit Guidelines as per our [CONTRIBUTING.md document](https://github.com/jhipster/generator-jhipster/blob/master/CONTRIBUTING.md) are followed

<!--
Please also reference the issue number in a commit message to [automatically close the related Github issue](https://help.github.com/articles/closing-issues-via-commit-messages/)

Note: It is also possible to add `[skip ci]` to your commit message to skip Travis tests
-->



Patch:
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
deleted file mode 100644
index 75556300ea..0000000000
--- a/azure-pipelines.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-# Node.js
-# Build a general Node.js application with npm.
-# Add steps that analyze code, save build artifacts, deploy, and more:
-# https://docs.microsoft.com/vsts/pipelines/languages/javascript
-
-pool:
-  vmImage: 'Ubuntu 16.04'
-
-steps:
-- task: NodeTool@0
-  inputs:
-    versionSpec: '8.11.4'
-  displayName: 'Install Node.js'
-
-- script: |
-    docker version
-  displayName: 'docker version'
-- script: |
-    docker-compose version
-  displayName: 'docker-compose version'
-- script: |
-    npm install
-  displayName: 'npm install'
-- script: |
-    npm link
-  displayName: 'npm link'
diff --git a/generators/client/files-angular.js b/generators/client/files-angular.js
index 2fffc3fd95..20ec38992e 100644
--- a/generators/client/files-angular.js
+++ b/generators/client/files-angular.js
@@ -44,6 +44,7 @@ const files = {
                 'webpack/webpack.common.js',
                 'webpack/webpack.dev.js',
                 'webpack/webpack.prod.js',
+                'postcss.config.js',
                 { file: 'webpack/logo-jhipster.png', method: 'copy' }
             ]
         }
@@ -84,12 +85,6 @@ const files = {
             templates: [
                 'content/scss/rtl.scss',
             ]
-        },
-        {
-            condition: generator => generator.useSass,
-            templates: [
-                'postcss.config.js'
-            ]
         }
     ],
     image: [
diff --git a/generators/client/templates/angular/package.json.ejs b/generators/client/templates/angular/package.json.ejs
index 9d376a5027..c296c0b193 100644
--- a/generators/client/templates/angular/package.json.ejs
+++ b/generators/client/templates/angular/package.json.ejs
@@ -74,7 +74,6 @@
     "copy-webpack-plugin": "4.5.1",
     "css-loader": "0.28.10",
     "exports-loader": "0.7.0",
-    "extract-text-webpack-plugin": "4.0.0-beta.0",
     "file-loader": "1.1.11",
     "fork-ts-checker-webpack-plugin": "0.4.1",
     "friendly-errors-webpack-plugin": "1.7.0",
@@ -97,7 +96,9 @@
     <%_ if (enableTranslation) { _%>
     "merge-jsons-webpack-plugin": "1.0.14",
     <%_ } _%>
+    "mini-css-extract-plugin": "0.4.2",
     "moment-locales-webpack-plugin": "1.0.5",
+    "optimize-css-assets-webpack-plugin": "5.0.1",
     "prettier": "1.11.1",
     <%_ if (protractorTests) { _%>
     "protractor": "5.4.0",
@@ -123,8 +124,8 @@
     <%_ if (useSass) { _%>
     "sass": "1.13.0",
     "sass-loader": "7.1.0",
-    "postcss-loader": "2.1.1",
     <%_ } _%>
+    "postcss-loader": "2.1.1",
     <%_ if (buildTool === 'maven') { _%>
     "xml2js": "0.4.19",
     <%_ } _%>
diff --git a/generators/client/templates/angular/webpack/webpack.prod.js.ejs b/generators/client/templates/angular/webpack/webpack.prod.js.ejs
index 4a1d9228d4..72aff7d252 100644
--- a/generators/client/templates/angular/webpack/webpack.prod.js.ejs
+++ b/generators/client/templates/angular/webpack/webpack.prod.js.ejs
@@ -18,7 +18,8 @@
 -%>
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const Visualizer = require('webpack-visualizer-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
@@ -32,9 +33,7 @@ const commonConfig = require('./webpack.common.js');
 const ENV = 'production';
 <%_ if (useSass) { _%>
 const sass = require('sass');
-const extractSASS = new ExtractTextPlugin(`content/[name]-sass.[hash].css`);
 <%_ } _%>
-const extractCSS = new ExtractTextPlugin(`content/[name].[hash].css`);
 
 module.exports = webpackMerge(commonConfig({ env: ENV }), {
     // Enable source maps. Please note that this will slow down the build.
@@ -62,22 +61,23 @@ module.exports = webpackMerge(commonConfig({ env: ENV }), {
         <%_ if (useSass) { _%>
         {
             test: /\.scss$/,
-            use: ['to-string-loader', 'css-loader', { 
-                loader: 'sass-loader', 
+            use: ['to-string-loader', 'css-loader', {
+                loader: 'sass-loader',
                 options: { implementation: sass }
             }],
             exclude: /(vendor\.scss|global\.scss)/
         },
         {
             test: /(vendor\.scss|global\.scss)/,
-            use: extractSASS.extract({
-                fallback: 'style-loader',
-                use: ['css-loader', 'postcss-loader', { 
-                    loader: 'sass-loader', 
+            use: [
+                MiniCssExtractPlugin.loader,
+                'css-loader',
+                'postcss-loader',
+                {
+                    loader: 'sass-loader',
                     options: { implementation: sass }
-                }],
-                publicPath: '../'
-            })
+                }
+            ]
         },
         <%_ } _%>
         {
@@ -87,11 +87,11 @@ module.exports = webpackMerge(commonConfig({ env: ENV }), {
         },
         {
             test: /(vendor\.css|global\.css)/,
-            use: extractCSS.extract({
-                fallback: 'style-loader',
-                use: ['css-loader'],
-                publicPath: '../'
-            })
+            use: [
+                MiniCssExtractPlugin.loader,
+                'css-loader',
+                'postcss-loader'
+            ]
         }]
     },
     optimization: {
@@ -132,14 +132,17 @@ module.exports = webpackMerge(commonConfig({ env: ENV }), {
                         indent_level: 2
                     }
                 }
-            })
+            }),
+            new OptimizeCSSAssetsPlugin({})
         ]
     },
     plugins: [
-        <%_ if (useSass) { _%>
-        extractSASS,
-        <%_ } _%>
-        extractCSS,
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: '[name].[contenthash].css',
+            chunkFilename: '[id].css'
+        }),
         new MomentLocalesPlugin({
             localesToKeep: [
                 // jhipster-needle-i18n-language-moment-webpack - JHipster will add/remove languages in this array


Test patch:
diff --git a/test/utils/expected-files.js b/test/utils/expected-files.js
index 65db24634a..e9b3a8784e 100644
--- a/test/utils/expected-files.js
+++ b/test/utils/expected-files.js
@@ -200,6 +200,7 @@ const expectedFiles = {
         '.prettierignore',
         '.prettierrc',
         'package.json',
+        'postcss.config.js',
         'proxy.conf.json',
         'src/main/webapp/404.html',
         `${CLIENT_MAIN_SRC_DIR}app/account/account.module.ts`,