[canvas/shareable_runtime] sync sass loaders with kbn/optimizer (elas…

…tic#60653)

* [canvas/shareable_runtime] sync sass loaders with kbn/optimizer

* limit sass options to those relevant in this context

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js

@@ -6,6 +6,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
+const { stringifyRequest } = require('loader-utils'); // eslint-disable-line
 
 const {
   KIBANA_ROOT,
@@ -140,19 +141,63 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        exclude: /\.module.(s(a|c)ss)$/,
+        exclude: [/node_modules/, /\.module\.s(a|c)ss$/],
         use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader', options: { importLoaders: 2 } },
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: !isProd,
+            },
+          },
           {
             loader: 'postcss-loader',
             options: {
+              sourceMap: !isProd,
               config: {
-                path: require.resolve('./postcss.config.js'),
+                path: require.resolve('./postcss.config'),
+              },
+            },
+          },
+          {
+            loader: 'resolve-url-loader',
+            options: {
+              // eslint-disable-next-line no-unused-vars
+              join: (_, __) => (uri, base) => {
+                if (!base) {
+                  return null;
+                }
+
+                // manually force ui/* urls in legacy styles to resolve to ui/legacy/public
+                if (uri.startsWith('ui/') && base.split(path.sep).includes('legacy')) {
+                  return path.resolve(KIBANA_ROOT, 'src/legacy/ui/public', uri.replace('ui/', ''));
+                }
+
+                return null;
+              },
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              // must always be enabled as long as we're using the `resolve-url-loader` to
+              // rewrite `ui/*` urls. They're dropped by subsequent loaders though
+              sourceMap: true,
+              prependData(loaderContext) {
+                return `@import ${stringifyRequest(
+                  loaderContext,
+                  path.resolve(KIBANA_ROOT, 'src/legacy/ui/public/styles/_styling_constants.scss')
+                )};\n`;
+              },
+              webpackImporter: false,
+              sassOptions: {
+                outputStyle: 'nested',
+                includePaths: [path.resolve(KIBANA_ROOT, 'node_modules')],
               },
             },
           },
-          { loader: 'sass-loader' },
         ],
       },
       {

x-pack/package.json

@@ -142,6 +142,7 @@
     "jest-cli": "^24.9.0",
     "jest-styled-components": "^7.0.0",
     "jsdom": "^15.2.1",
+    "loader-utils": "^1.2.3",
     "madge": "3.4.4",
     "marge": "^1.0.1",
     "mocha": "^6.2.2",