support sass pkg imports

nytimes · Jan 22, 2025 · a979917 · a979917
1 parent bf2c8ea
commit a979917
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/packages/kyt-core/src/config/webpack.dev.client.js b/packages/kyt-core/src/config/webpack.dev.client.js
@@ -6,6 +6,7 @@ const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware')
 const { kytWebpackPlugins } = require('kyt-runtime/webpack');
 const { clientSrcPath, assetsBuildPath, publicBuildPath, publicSrcPath } =
   require('kyt-utils/paths')();
+const { NodePackageImporter } = require('sass');
 const getPolyfill = require('./getPolyfill');
 const postcssLoader = require('../utils/getPostcssLoader');
 
@@ -86,7 +87,15 @@ module.exports = options => {
               },
             },
             postcssLoader,
-            'sass-loader',
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+                sassOptions: {
+                  pkgImporter: new NodePackageImporter(),
+                },
+              },
+            },
           ],
           exclude: [publicSrcPath],
         },

diff --git a/packages/kyt-core/src/config/webpack.dev.server.js b/packages/kyt-core/src/config/webpack.dev.server.js
@@ -4,6 +4,7 @@ const webpack = require('webpack');
 const nodeExternals = require('webpack-node-externals');
 const { serverSrcPath, serverBuildPath, clientAssetsFile, loadableAssetsFile, publicSrcPath } =
   require('kyt-utils/paths')();
+const { NodePackageImporter } = require('sass');
 const StartServerPlugin = require('./StartServerPlugin');
 const postcssLoader = require('../utils/getPostcssLoader');
 const getPolyfill = require('./getPolyfill');
@@ -68,7 +69,15 @@ module.exports = options => {
               },
             },
             postcssLoader,
-            'sass-loader',
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+                sassOptions: {
+                  pkgImporter: new NodePackageImporter(),
+                },
+              },
+            },
           ],
           exclude: [publicSrcPath],
         },

diff --git a/packages/kyt-core/src/config/webpack.prod.client.js b/packages/kyt-core/src/config/webpack.prod.client.js
@@ -1,6 +1,7 @@
 // Production webpack config for client code
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { NodePackageImporter } = require('sass');
 const { clientSrcPath, assetsBuildPath, publicSrcPath } = require('kyt-utils/paths')();
 const { kytWebpackPlugins } = require('kyt-runtime/webpack');
 const postcssLoader = require('../utils/getPostcssLoader');
@@ -44,6 +45,9 @@ module.exports = options => ({
             loader: 'sass-loader',
             options: {
               sourceMap: true,
+              sassOptions: {
+                pkgImporter: new NodePackageImporter(),
+              },
             },
           },
         ],

diff --git a/packages/kyt-core/src/config/webpack.prod.server.js b/packages/kyt-core/src/config/webpack.prod.server.js
@@ -2,6 +2,7 @@
 
 const webpack = require('webpack');
 const nodeExternals = require('webpack-node-externals');
+const { NodePackageImporter } = require('sass');
 const { serverSrcPath, serverBuildPath, publicSrcPath } = require('kyt-utils/paths')();
 const postcssLoader = require('../utils/getPostcssLoader');
 const getPolyfill = require('./getPolyfill');
@@ -51,7 +52,15 @@ module.exports = options => {
               },
             },
             postcssLoader,
-            'sass-loader',
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+                sassOptions: {
+                  pkgImporter: new NodePackageImporter(),
+                },
+              },
+            },
           ],
           exclude: [publicSrcPath],
         },