Question

我正在尝试在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

然后将其添加到nuxt.config.js中的css数组中：

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

但是随后nuxt.js在build中引发了一个错误：

× 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，将手写笔的版本设置为^ 0.54.5，将手写笔加载器的版本设置为^ 3.0.2。

Full link to package.json and nuxt.config.js

使用这些信息，您能找到我的设置有什么问题吗？

Answer 1

这条线对我有用。在nuxt.config.js中

css：['〜assets / app.styl']

Answer 2

对于nuxt js版本2，Nuxt资产文件夹路径应类似于此

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

我希望它能解决您的问题

Answer 3

问题讨论中的解决方案nuxt issue 参考webpack stylus options 对于最新版本（2.14.7），

扩展映射所有加载程序的webpack配置，

build: {
    extend (config, { isDev, isClient }) {
      [].concat(...config.module.rules.find(e => e.test.toString().match(/\.styl/)).oneOf.map(e => e.use.filter(e => e.loader == 'stylus-loader'))).forEach(stylus => { 
        Object.assign(stylus.options, {
          //preferPathResolver: 'webpack',
          sourceMap: true,
          stylusOptions: { 
            //use: ['nib'],
            include: ['~assets/styles'],  //include all styl files from folder
            import: [
              '~assets/style/main.styl',  //your main styl file
            ],
          },
        })
        //console.log(stylus)
      }) 
    },

这将导入文件并包括手写笔文件夹。

Nuxt无法加载手写笔文件

3 个答案: