CSS is not properly compiled

[JanTrichter]

Expected behavior

Project should start and load all files when running npm run start.

Current behavior

When I run npm run start in my current project I get no css file sometimes. The project sideloads correctly but Webpack references a stylesheet that doesn't exist (although it should).

Steps to Reproduce

1. Create a new office taskpane project (Vanilla-TS)
2. Add a new dialog.html "component" (html, css and ts file)
3. Remove taskpane completely
4. replace the content of the action function in the commands.ts with:

   Office.context.ui.displayDialogAsync(`${process.env.HOST}dialog.html?param=testParam`, {
   height: 50,
   width: 50,
   });

   this will spawn a new dialog in which we use the dialog.html file.

5. start the project with npm run start and observe if the css is included or not (it might work sometimes)

Context

• Operating System: Windows 10 Build 19044
• Node version: 16.15.1
• Office version: Desktop - Microsoft® Outlook® Microsoft 365 MSO (Version 2208 Build 16.0.15601.20072) 64 Bit and Web version
• Tool version: (from package.json):

  "office-addin-cli": "^1.4.0",
  "office-addin-debugging": "^4.4.0",
  "office-addin-dev-certs": "^1.8.0",
  "office-addin-lint": "^2.1.0",
  "office-addin-manifest": "^1.9.0",
  "office-addin-prettier-config": "^1.2.0",

Failure Logs

The console actually said that the stylesheet had the wrong MIME-type though there wasn't any stylesheet available (webpack linked a stylesheet with a hashed name though).

Error in the debugging console:

Refused to apply style from 'https://localhost:3000/9018db1b3790bb4a268e.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Fix

I fixed this issue by:

1. installing style loader and css loader plugins:

   npm install --save-dev style-loader css-loader

2. updating the webpack.config.js with the loader:

   module: {
     rules: [
       // ...
       {
         test: /\.css$/i,
         exclude: /node_modules/,
         use: ["style-loader", 
         {
           loader: "css-loader",
           options: {
             importLoaders: 1,
           },
         }],
       },
       // ...
     ]
   },

3. importing the stylesheet in my dialog.ts

   import "./dialog.css";

I never encountered this error before so I was a bit confused when I saw this but my workaround fixed it. Maybe this should be integrated in the template by default?

[millerds]

I haven't tried these steps specifically, but I have been noticing that sometimes the css isn't loading. It's really odd because I can see the webpack output that says it's there but trying to browse the css file directly doesn't serve it up (the error is because webpack sends an html page for the error and thus it isn't a css mime type).

Thanks for the suggested workaround I'll look at incorporating this into the template.

[JanTrichter]

@millerds If you incorporate this, you would also need to update the docs accordingly otherwise it will cause tons of confusion.

I think the error is also only occurring when running the dev-server. Building the project with npm run build will not cause an error - or at least I haven't experienced that yet.

[millerds]

The css loading was due to the hot reloading taking place and not including the css file. the templates have been updated to fix this.