【问题标题】:Importing local css and js files from bootstrap theme to nuxt.js config将本地 css 和 js 文件从引导主题导入到 nuxt.js 配置
【发布时间】:2019-08-29 14:33:08
【问题描述】:

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

我似乎已经知道如何将单个 CSS 样式表添加到配置中,但是当我添加多个样式表时,应用程序会中断。

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

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

我尝试将源路径添加到配置的链接部分,我终于成功地尝试了这种方式:

/*
  ** 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>

可以在此处克隆/检查完整的 repo:

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

如果我需要提供任何其他信息,请告诉我。谢谢!

更新:

刚刚意识到我在资产文件夹中使用的引导主题的 /dist 文件夹没有提交到 Github,因此这无助于任何试图查看 repo 或克隆它的人。对不起!让我知道是否有什么可以帮助解决问题的方法

【问题讨论】:

  • 你能解决这个问题吗?我在同一条船上。
  • 您好!实际上,我认为我从来没有完全工作过。我可能已经让它在一定程度上发挥了作用,但是集成引导主题是如此痛苦,以至于我刚刚切换到常规的 Vue 并在几分钟内完成了所有排序。真希望我能在那个项目中使用 Nuxt,但集成某些引导主题肯定是一个挑战。祝你好运! :) 希望你能比我走得更远。

标签: vue.js nuxt.js


【解决方案1】:

诀窍是你必须把你的css放在静态文件夹中,然后你可以这样导入:

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

【讨论】:

    【解决方案2】:

    我觉得脚本数组应该是这样的,在head对象里面:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-01-30
      • 2018-08-17
      • 1970-01-01
      • 2015-12-17
      • 2020-06-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多