Merge pull request #6761 from FlowFuse/6729-sass

chore: Replace deprecated node-sass with sass

Author: cstns

config/webpack.config.js

@@ -16,8 +16,9 @@ function getPath (file) {
 }
 
 module.exports = function (env, argv) {
+    const devMode = argv?.mode === 'development'
     const config = {
-        devtool: process.env.mode === 'production' ? 'hidden-source-map' : 'source-map',
+        devtool: devMode ? 'source-map' : 'hidden-source-map',
         entry: {
             main: getPath('frontend/src/main.js'),
             setup: getPath('frontend/src/setup.js')
@@ -47,7 +48,7 @@ module.exports = function (env, argv) {
                     include: getPath('frontend/src'),
                     use: [
                         {
-                            loader: MiniCssExtractPlugin.loader,
+                            loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                             options: {}
                         },
                         {
@@ -79,15 +80,19 @@ module.exports = function (env, argv) {
                 }, {
                     test: /\.scss$/,
                     use: [
-                        'style-loader',
+                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                         {
                             loader: 'css-loader',
                             options: { import: true, url: true }
                         },
                         {
                             loader: 'sass-loader',
                             options: {
-                                additionalData: '@import "@/ui-components/stylesheets/ff-colors.scss";@import "@/ui-components/stylesheets/ff-utility.scss";'
+                                additionalData: '@import "@/ui-components/stylesheets/ff-colors.scss";@import "@/ui-components/stylesheets/ff-utility.scss";',
+                                sassOptions: {
+                                    // Silence warnings about @import deprecation
+                                    silenceDeprecations: ['import']
+                                }
                             }
                         }
 
@@ -137,7 +142,7 @@ module.exports = function (env, argv) {
             new DotenvPlugin(),
             new DefinePlugin({
                 __VUE_OPTIONS_API__: true,
-                __VUE_PROD_DEVTOOLS__: argv?.mode === 'development'
+                __VUE_PROD_DEVTOOLS__: devMode
             })
         ],
         optimization: {