Nuxt 无法加载手写笔文件答案

【问题标题】：Nuxt can't load stylus fileNuxt 无法加载手写笔文件
【发布时间】：2018-11-21 22:28:50
【问题描述】：

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

您能根据这些信息找出我的设置有什么问题吗？

【问题讨论】：

标签： nuxt.js stylus

【解决方案1】：

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

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

希望能解决你的问题

【讨论】：

【解决方案2】：

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

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

【讨论】：

嘿，你能编辑你的答案解释为什么这样有效吗？

【解决方案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 文件夹。

【讨论】：