我们如何在使用 express 的自定义服务器中使用 buefy 配置 nuxtjs

Question

我选择 buefy 作为前端框架来生成我的 nuxt 应用程序，它确实可以找到，但是当我将 package.json 脚本配置为使用 node server.js（用于自定义快速服务器）以开发模式而不是默认nuxt 命令buefy 不起作用。我尝试自定义 buefy 并将 scss 文件添加到 ~/assets/scss/main.scss 文件中，但它并没有改变任何东西。我不明白为什么当我使用 node 而不是 nuxt 时它不起作用。如果有人有解决方案，我将不胜感激。 下面是我的package.json、~/assets/scss/main.scss和nuxt.config.js

package.json

{
...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "NODE_ENV=production node server.js",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.5",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "mongoose": "^5.11.7",
    "nuxt": "^2.14.6",
    "nuxt-buefy": "^0.4.4"
  },
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.32.2",
    "sass-loader": "^10.1.0"
  }
}

~/assets/scss/main.scss

// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Set your colors
$primary: #8c67ef;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
$twitter: #4099ff;
$twitter-invert: findColorInvert($twitter);
// Lists and maps
...

$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

nuxt.config.js

{...
  modules: ["@nuxtjs/axios", "nuxt-buefy"],
  css: ["~/assets/scss/main"],
...
}

Answer 1

之后，修改我的代码，我发现我设置了一些 Content Security Policies 在加载后阻止了 buefy，所以我删除了它并且它工作正常。