Nuxt 无法加载手写笔文件

Question

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

首先我使用 npm i -D stylus stylus-loader

安装了手写笔包

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

@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 在构建中抛出错误：

× 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。

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

你能用这些信息找出我的设置有什么问题吗？

Answer 1

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

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

希望能解决你的问题

Answer 2

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

css: ['~assets/app.styl']

Answer 3

问题讨论的解决方案nuxt issue 参考 webpack stylus options 对于最新的 nuxt (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)
      }) 
    },

这会导入文件并包含 stylus 文件夹。

Nuxt 无法加载手写笔文件

Nuxt can't load stylus file

stylus

nuxt.js