Question

我正在尝试使Aurelia项目在html文件中包含带有.scss标签的<require>文件，而不是通过打字稿文件中的import语句。 / p>

我看过relevant Webpack issue，但是我不理解viewEngine.addResourcePlugin的建议用法。

给出基本的Aurelia + Webpack设置后，出现以下错误：

Error: Failed loading required CSS file: app.scss
    at fixupCSSUrls (hmr-css-resource.js:32)

这是我的webpack.config.js

const path = require("path");
const { AureliaPlugin } = require("aurelia-webpack-plugin");

module.exports = {
  entry: "aurelia-bootstrapper",

  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "[name].js",
    chunkFilename: "[name].js"
  },

  resolve: {
    extensions: [".ts", ".js"],
    modules: ["src", "node_modules"].map(x => path.resolve(x)),
  },

  module: {
    rules: [
      // Only apply style-loader when loading via import in a .ts file
      { test: /\.s?css$/i, issuer: { test: /\.[tj]s$/i }, use: ["style-loader"] },
      { test: /\.css$/i, use: ["css-loader"] },
      { test: /\.scss$/, use: ["css-loader", "sass-loader"] },
      { test: /\.ts$/i, use: "awesome-typescript-loader" },
      { test: /\.html$/i, use: "html-loader" },
    ]
  },

  plugins: [
    new AureliaPlugin(),
  ],
};

我的app.html：

<template>
  <require from="./app.scss"></require>
  Hello World!
</template>

我的main.html：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body aurelia-app="main">
    <script src="/dist/main.js"></script>
  </body>
</html>

我的main.ts：

import { Aurelia, PLATFORM } from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
         .standardConfiguration()
         .developmentLogging();
  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

如何通过Aurelia模板中的require元素包括SASS

0 个答案: