使用Aurelia CLI+Webpack+Stylus+Pug时加载app.styl失败求助

一、修复Failed loading required CSS file: app.styl错误 #

这个问题的核心是Aurelia无法正确解析Pug模板中的<require>资源引用，因为Webpack加载器链没有把Aurelia的模板处理逻辑和Pug编译结合起来，试试下面的步骤：

1. 确保Stylus加载器配置完整
   先检查项目2的Webpack规则中，是否和项目1一样包含了Stylus的处理规则，加载器顺序不能错（Webpack加载器从右到左执行）：

   module.exports = {
     module: {
       rules: [
         // ...其他规则
         {
           test: /\.styl$/,
           use: [
             'style-loader',
             'css-loader',
             'stylus-loader'
           ]
         }
       ]
     }
   };
   

2. 调整Pug加载器链，加入Aurelia模板处理
   你之前的Pug加载器配置缺少aurelia-template-loader，这会导致Aurelia无法识别Pug模板里的<require>标签。修改组件模板的Pug规则：

   {
     test: /\.pug$/,
     exclude: /index\.pug$/, // 排除入口模板，后面单独处理
     use: [
       'aurelia-template-loader', // 先让Aurelia处理资源引用
       { loader: 'pug-loader', options: { pretty: true } } // 再编译Pug为HTML
     ]
   }
   

   这个加载器链会先把Pug编译成HTML，再让Aurelia的模板加载器解析里面的<require>，从而正确找到并加载app.styl。

3. 检查模板中的资源路径
   确保app.pug中的引用是正确的相对路径，比如：

   require(from="./app.styl")
   // 或者用标签形式
   <require from="./app.styl"></require>
   

   改模板后缀后，Webpack的路径解析上下文可能变化，明确相对路径能避免找不到文件的问题。

二、向index.pug传递locals变量 #

要给入口模板index.pug传递metadata，需要让apply-loader正确把HtmlWebpackPlugin的参数传给pug-loader返回的编译函数，这里有两种可行方案：

方案1：使用Inline Loader指定处理链 #

直接在HtmlWebpackPlugin的template字段中指定加载器链，精准控制入口模板的处理：

new HtmlWebpackPlugin({
  template: '!!apply-loader!pug-loader?pretty=true!index.pug',
  inject: true,
  metadata: {
    title: 'My Aurelia App',
    server: 'localhost:8080',
    baseUrl: '/'
  }
})

这里的!!是为了跳过全局加载器规则，强制使用指定的加载器链。之后你就能在index.pug中直接使用这些变量：

html
  head
    title= metadata.title
    base(href=metadata.baseUrl)
  body
    p Running on #{metadata.server}

方案2：区分入口模板和组件模板的全局规则 #

如果不想用inline loader，可以在Webpack规则中单独处理index.pug：

module.exports = {
  module: {
    rules: [
      // 处理组件模板（app.pug等）
      {
        test: /\.pug$/,
        exclude: /index\.pug$/,
        use: [
          'aurelia-template-loader',
          { loader: 'pug-loader', options: { pretty: true } }
        ]
      },
      // 处理入口index.pug
      {
        test: /index\.pug$/,
        use: [
          'apply-loader',
          { loader: 'pug-loader', options: { pretty: true } }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.pug',
      inject: true,
      metadata: {
        title: 'My Aurelia App',
        server: 'localhost:8080',
        baseUrl: '/'
      }
    }),
    new AureliaPlugin({ viewsExtensions: '.pug' })
  ]
};

这样HtmlWebpackPlugin会自动用对应的加载器处理index.pug，同样可以在模板中访问metadata里的变量。

内容的提问来源于stack exchange，提问作者jdp