首页 > 解决方案 > Nuxt 无法加载手写笔文件

问题描述

我正在尝试在 nuxt 中加载手写笔文件。

首先,我使用安装了手写笔包npm i -D stylus stylus-loader

然后我在文件夹中创建了一个app.styl文件assets/style

@require '~vuetify/src/stylus/settings/_colors'
$theme := {
  primary:     $blue.darken-2
  accent:      $blue.accent-2
  secondary:   $grey.lighten-1
  info:        $blue.lighten-1
  warning:     $amber.darken-2
  error:       $red.accent-4
  success:     $green.lighten-2
}

// Import Vuetify styling
@require '~vuetify/src/stylus/main'

.page
  @extend .fade-transition

然后我将它添加到 css 数组中nuxt.config.js

  /*
  ** Global CSS
  */
  css: [{ src: '~assets/style/app.styl', lang: 'styl'}],

但随后 nuxt.js 在构建中抛出错误:

× error friendly-errors » Failed to compile with 1 errors
> log friendly-errors » This dependency was not found:
> log friendly-errors » * ..\assets\style\app.styl in ./.nuxt/App.js
> log friendly-errors » To install it, you can run: npm install --save ..\assets\style\app.styl

在我package.json的版本中,nuxt 的版本为 ^2.3.1,stylus 的版本为 ^0.54.5,stylus-loader 的版本为 ^3.0.2。

package.json 和 nuxt.config.js 的完整链接

您能使用这些信息找出我的设置有什么问题吗?

标签: nuxt.jsstylus

解决方案


对于 nuxt js 版本 2,Nuxt 资产文件夹路径应该是这样的

 /*
  ** Global CSS
  */
  css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]

我希望它能解决你的问题


推荐阅读