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

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

我选择 buefy 作为前端框架来生成我的 nuxt 应用程序，它确实可以找到，但是当我将 package.json 脚本配置为使用 node server.js（用于自定义快速服务器）以在开发模式下运行时默认的 nuxt 命令 buefy 不起作用。我尝试自定义 buefy 并在 ~/assets/scss/main.scss 文件中添加了 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"],...
}

解决方法

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