diff --git a/package-lock.json b/package-lock.json
index bc2251baa..040254e29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25456,6 +25456,22 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+      "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
@@ -27176,6 +27192,22 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/read-cache/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -34243,6 +34275,7 @@
         "cssnano": "^4.1.10",
         "mini-css-extract-plugin": "^0.12.0",
         "postcss": "^8.4.20",
+        "postcss-import": "^16.1.0",
         "postcss-loader": "^4.0.0",
         "sass": "^1.77.2",
         "sass-embedded": "^1.77.2",
diff --git a/packages/dotcom-build-sass/package.json b/packages/dotcom-build-sass/package.json
index 8caf2beb3..17b4785e5 100644
--- a/packages/dotcom-build-sass/package.json
+++ b/packages/dotcom-build-sass/package.json
@@ -22,10 +22,11 @@
   },
   "dependencies": {
     "autoprefixer": "^10.2.5",
-    "postcss": "^8.4.20",
     "css-loader": "^3.0.0",
     "cssnano": "^4.1.10",
     "mini-css-extract-plugin": "^0.12.0",
+    "postcss": "^8.4.20",
+    "postcss-import": "^16.1.0",
     "postcss-loader": "^4.0.0",
     "sass": "^1.77.2",
     "sass-embedded": "^1.77.2",
@@ -40,7 +41,10 @@
     "node": "18.x || 20.x",
     "npm": "8.x || 9.x || 10.x"
   },
-  "files": ["dist/", "src/"],
+  "files": [
+    "dist/",
+    "src/"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
diff --git a/packages/dotcom-build-sass/src/index.ts b/packages/dotcom-build-sass/src/index.ts
index 129b2614b..9590bfe75 100644
--- a/packages/dotcom-build-sass/src/index.ts
+++ b/packages/dotcom-build-sass/src/index.ts
@@ -71,6 +71,9 @@ export class PageKitSassPlugin {
     const postcssLoaderOptions = {
       postcssOptions: {
         plugins: [
+          // Allow @import of CSS files from node_modules
+          // https://github.com/postcss/postcss-import
+          require('postcss-import')(),
           // Add vendor prefixes automatically using data from Can I Use
           // https://github.com/postcss/autoprefixer
           require('autoprefixer')(autoprefixerOptions),
@@ -84,6 +87,9 @@ export class PageKitSassPlugin {
     }
 
     const cssLoaderOptions = {
+      // sass-loader then postcss-loader run first
+      // https://github.com/webpack-contrib/css-loader/blob/22e16e2fc88f920571219570953d3da5702d4fdb/README.md?plain=1#L921
+      importLoaders: 2,
       // Allow css-loader to resolve @import because the sass-loader
       // does not successfully resolve files with a .css extension.
       import: true,