[bug] Styles don't get bundled

[Verzach3]

Describe the bug

when i run tauri dev the styles work normally, but when i do tauri build the styles are not added to the bundle

With tauri dev

With tauri build

Reproduction

1. Create new project with create-tauri-app, select Typescript
2. Add @fluentui/react with yarn add @fluentui/react
3. Add a button from fluentui, i added PrimaryButton and DefaultButton
4. run cargo tauri dev and the styles load
5. run cargo tauri build and the components appear without styles

Expected behavior

No response

Platform and versions

Operating System - Windows, version 10.0.22000 X64
Webview2 - 98.0.1108.43
Visual Studio Build Tools:
   - Visual Studio Build Tools 2019

Node.js environment
  Node.js - 16.14.0
  @tauri-apps/cli - 1.0.0-rc.0
  @tauri-apps/api - 1.0.0-rc.0

Global packages
  npm - 8.3.1
  pnpm - Not installed
  yarn - 1.22.17

Rust environment
  rustc - 1.58.1
  cargo - 1.58.0

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-x86_64-pc-windows-msvc

App directory structure
/.git
/build
/node_modules
/public
/src
/src-tauri

App
  tauri.rs - 1.0.0-rc.1
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../build
  devPath - http://localhost:3000/
  framework - React

Note: It says Windows 10 but is Windows 11

Stack trace

No response

Additional context

No response

[kt215]

I have the same exact issue with angular.

[nothingismagick]

Can one of you share your tauri.conf file?

[kt215]

In my case it's the default config created by npx create-tauri-app:

{
  "package": {
    "productName": "ngtest2",
    "version": "0.1.0"
  },
  "build": {
    "distDir": "../dist/ngtest2",
    "devPath": "http://localhost:4200",
    "beforeDevCommand": "npm run start",
    "beforeBuildCommand": "npm run build"
  },
  "tauri": {
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.dev",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "resources": [],
      "externalBin": [],
      "copyright": "",
      "category": "DeveloperTool",
      "shortDescription": "",
      "longDescription": "",
      "deb": {
        "depends": [],
        "useBootstrapper": false
      },
      "macOS": {
        "frameworks": [],
        "minimumSystemVersion": "",
        "useBootstrapper": false,
        "exceptionDomain": "",
        "signingIdentity": null,
        "providerShortName": null,
        "entitlements": null
      },
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "updater": {
      "active": false
    },
    "allowlist": {
      "all": true
    },
    "windows": [
      {
        "title": "Angular Test 2",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": "default-src 'self'"
    }
  }
}

[Verzach3]

This is mine

{
  "package": {
    "productName": "raffle-manager-tauri-react",
    "version": "0.1.0"
  },
  "build": {
    "distDir": "../build",
    "devPath": "http://localhost:3000",
    "beforeDevCommand": "yarn start",
    "beforeBuildCommand": "yarn build"
  },
  "tauri": {
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.gaer.rafflemanager",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "resources": ["external/assets/"],
      "externalBin": [
        "external/binaries/raffle-editor",
        "external/binaries/list-dir"
      ],
      "copyright": "",
      "category": "DeveloperTool",
      "shortDescription": "",
      "longDescription": "",
      "deb": {
        "depends": [],
        "useBootstrapper": false
      },
      "macOS": {
        "frameworks": [],
        "minimumSystemVersion": "",
        "useBootstrapper": false,
        "exceptionDomain": "",
        "signingIdentity": null,
        "providerShortName": null,
        "entitlements": null
      },
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "updater": {
      "active": false
    },
    "allowlist": {
      "all": true,
      "shell": {
        "all": true,
        "execute": true,
        "open": false,
        "scope": [
          {
            "name": "external/binaries/raffle-editor",
            "cmd": "raffle-editor",
            "sidecar": true,
            "args": true
          }
        ],
        "sidecar": true
      }
    },
    "windows": [
      {
        "title": "Raffle Manager",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": "default-src 'self' "
    }
  }
}

[nothingismagick]

Are there any warnings in the log during tauri build

[nothingismagick]

And does this happen if you run tauri build --debug? If it does, then please check the console tab under sources and let us know what you find there

[lucasfernog]

The styles should exist on the distDir folder. Maybe angular is not configured to do so, and it stays on the public directory? i'm not at home right now but i can check this tomorrow.

[kt215]

tauri build and angular worked just fine with the last beta version (8?). No warning with tauri build or tauri build --debug. It only works correctly with latest using tauri dev:

[kt215]

With tauri build and AppImage on Linux Mint. It shows a "blank" page, then scroll down and you see this:

[lucasfernog]

Did you guys check the console for errors? it might also be a CSP error, so you can try setting the csp to null on tauri.conf.json

[kt215]

Setting csp: null appears to have fixed it for me.

[Verzach3]

I have the same behavior as kt215, there are no warnings and it only works with tauri dev, by the way setting csp to null solves the problem, does leaving csp to null have any inconvenience?

[lucasfernog]

The content security policy is a nice security feature but it needs configuration from your side, like allowing accessing remote fonts and stylesheets, so that might be the issue here. For now I'll change the default template to disable CSP so new users don't need to face this, but our documentation still encourage you to implement CSP for your app as that secures you from untrusted content loading.