Question

这是我的第一个nuxt.js项目，到目前为止已购买了boostrap主题以与我的应用程序一起使用。问题是，我不太确定如何使用该主题，因为我对常规Vue更加熟悉。

我似乎已经想出了如何向配置中添加单个CSS样式表，但是当我添加多个CSS样式表时，应用程序就会中断。

我尝试过这样添加本地src路径：

/*
  ** Global CSS
  */
  css: [
    {src:'/assets/main/Unishop/template-1/dist/css/styles.min.css'}
  ],
  /*

我尝试将源路径添加到config的链接部分，最后我成功尝试了这种方式：

/*
  ** Global CSS
  */
  css: [
    '~/assets/main/Unishop/template-1/dist/css/styles.min.css'
  ],
  /*

但是，我需要加载看起来像两个样式表的样式才能正常工作。这是我的主题index.html文件中<head>的内容：

<head>
    <meta charset="utf-8">
    <title>Unishop | Universal E-Commerce Template
    </title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Unishop - Universal E-Commerce Template">
    <meta name="keywords" content="shop, e-commerce, modern, flat style, responsive, online store, business, mobile, blog, bootstrap 4, html5, css3, jquery, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Rokaux">
    <!-- Mobile Specific Meta Tag-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Favicon and Apple Icons-->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
    <!-- Vendor Styles including: Bootstrap, Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="css/vendor.min.css">
    <!-- Main Template Styles-->
    <link id="mainStyles" rel="stylesheet" media="screen" href="css/styles.min.css">
    <!-- Modernizr-->
    <script src="js/modernizr.min.js"></script>
  </head>

完整的仓库可以在这里克隆/检查：

https://github.com/SIeep/US-kratom

如果我尝试添加多个样式表，则会收到bash中的以下消息：

$ npm run dev

> us-kratom@1.0.0 dev C:\Users\User55\Documents\US-kratom\US-Kratom
> cross-env NODE_ENV=development nodemon server/index.js --watch server

[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: C:\Users\User55\Documents\US-kratom\US-Kratom\server/**/*
[nodemon] starting `node server/index.js`
i Preparing project for development                                                                                                                          09:30:46
i Initial build may take a while                                                                                                                             09:30:46
√ Builder initialized                                                                                                                                        09:30:46
(node:2140) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, mkdir 'C:\Users\User55\Documents\US-kratom\US-Kratom\.nuxt\components'
(node:2140) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block,
or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:2140) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[nodemon] clean exit - waiting for changes before restart

如果需要提供其他信息，请告诉我。谢谢！

更新：

刚刚意识到我在自己的Assets文件夹中使用的bootstrap主题的/ dist文件夹没有提交给Github，因此对尝试查看该存储库或对其进行克隆的任何人都无济于事。抱歉!让我知道我有什么办法可以帮助您进行故障排除

Answer 1

诀窍是必须将css放入静态文件夹中，然后可以通过以下方式导入它：

/*
   ** Global CSS
   */
  css: [
    '~/static/css/style.css'
  ],

Answer 2

我认为脚本数组应该在head对象内部是这样的：

 /*
 ** Global CSS
    css: ['@/assets/styles/main.css'],
 */

从引导程序主题将本地css和js文件导入nuxt.js配置

2 个答案: