diff --git a/.changeset/angry-plants-peel.md b/.changeset/angry-plants-peel.md
new file mode 100644
index 0000000000..a2abd76c4e
--- /dev/null
+++ b/.changeset/angry-plants-peel.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+Fix CSS imports and move CSS outputs out of the dist folder.
diff --git a/packages/canon/.gitignore b/packages/canon/.gitignore
index 86fa479d2f..e7c52ff306 100644
--- a/packages/canon/.gitignore
+++ b/packages/canon/.gitignore
@@ -1,2 +1,5 @@
 # Build output
 storybook-static
+
+# CSS output
+css
diff --git a/packages/canon/package.json b/packages/canon/package.json
index a4feb707fa..2eed0fbfd6 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -19,11 +19,12 @@
     "directory": "packages/canon"
   },
   "license": "Apache-2.0",
-  "sideEffects": false,
+  "sideEffects": true,
   "main": "src/index.ts",
   "types": "src/index.ts",
   "files": [
-    "dist"
+    "dist",
+    "css"
   ],
   "scripts": {
     "build": "yarn build:app && yarn build:css",
diff --git a/packages/canon/scripts/build-css.mjs b/packages/canon/scripts/build-css.mjs
index f0ca17c73e..4ea38f8085 100644
--- a/packages/canon/scripts/build-css.mjs
+++ b/packages/canon/scripts/build-css.mjs
@@ -24,7 +24,7 @@ import { glob } from 'glob';
 
 // Check if core.css and components.css exist
 const cssDir = 'src/css';
-const distDir = 'dist/css';
+const distDir = 'css';
 const componentsDir = 'src/components';
 
 // Core files