diff --git a/packages/dotcom-build-css/README.md b/packages/dotcom-build-css/README.md
index cc24806ac..c4f712aaa 100644
--- a/packages/dotcom-build-css/README.md
+++ b/packages/dotcom-build-css/README.md
@@ -39,7 +39,7 @@ module.exports = {
 
 This plugin adds a [rule] to the Webpack configuration to handle `.css` files. It calls the [css-loader] package to load and parse the source files. The CSS is optimised using [css-minimizer-webpack-plugin], which runs [cssnano] under the hood. The [mini-css-extract-plugin] is added to generate `.css` files and the [webpack-fix-style-only-entries] to clean up any empty JavaScript bundles.
 
-The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently.
+The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently.  We also prevent importing CSS from Javascript files, as that's incompatible with the Asset Loader in production.
 
 [rule]: https://webpack.js.org/configuration/module/#rule
 [css-loader]: https://github.com/webpack-contrib/css-loader
diff --git a/packages/dotcom-build-css/src/index.ts b/packages/dotcom-build-css/src/index.ts
index 00f08a835..cab28cb07 100644
--- a/packages/dotcom-build-css/src/index.ts
+++ b/packages/dotcom-build-css/src/index.ts
@@ -34,6 +34,9 @@ export class PageKitCssPlugin {
 
     compiler.options.module.rules.push({
       test: [/\.css$/],
+      issuer: {
+        not: [/\.(js|ts)x?$/],
+      },
       use: cssRule()
     })
 
diff --git a/packages/dotcom-build-sass/README.md b/packages/dotcom-build-sass/README.md
index 23fdf781e..a3eea24e8 100644
--- a/packages/dotcom-build-sass/README.md
+++ b/packages/dotcom-build-sass/README.md
@@ -47,7 +47,7 @@ Sass supports both relative paths and paths that can be resolved within your `no
 new PageKitSassPlugin({ includePaths: [path.resolve('./path-to-sass-files')] })
 ```
 
-The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently.
+The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently. We also prevent importing Sass from Javascript files, as that's incompatible with the Asset Loader in production.
 
 [rule]: https://webpack.js.org/configuration/module/#rule
 [@financial-times/dotcom-build-css]: ../dotcom-build-css
diff --git a/packages/dotcom-build-sass/src/index.ts b/packages/dotcom-build-sass/src/index.ts
index f662311a3..0df6a3b22 100644
--- a/packages/dotcom-build-sass/src/index.ts
+++ b/packages/dotcom-build-sass/src/index.ts
@@ -53,6 +53,9 @@ export class PageKitSassPlugin {
 
     compiler.options.module.rules.push({
       test: [/\.sass|scss$/],
+      issuer: {
+        not: [/\.(js|ts)x?$/],
+      },
       use: [
         // Load generated CSS using the same logic as
         // @financial-times/dotcom-build-css