When using require to import css, app shows no content

[gregoryagu]

I have a small test app.

There is one css file called findme.css.

If I use import "findme.css", the app runs as usual and the css is found and embeded as expected.

If I then use the aurelia require syntax, the app builds and the css is found and embeded as expected, but at runtime, the app loads but nothing is displayed. The console shows the usual Aurelia startup messages. The last message is:

DEBUG [templating] importing resources for app.html ["css/findme.css"]

There are no error messages, everything appears normal. But nothing displays from app.html, not even plain text.

app.html -- does not work
<require from= "css/findme.css" />

app.js -- works
import 'css/findme.css'

wepack.config.js

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

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

  ///dev
  devtool: 'source-map',

  ///Prod
  //devtool: 'source-map',

  output: {
    path: path.join(__dirname, "wwwroot", "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  },

  resolve: {
    extensions: [".js"],
    modules: ["App", "node_modules"],    
  },

  module: {
    rules: [
        { test: /\.html$/i, loaders: "html-loader" },


        {
            test: /\.css$/i,
            loader: 'css-loader',
            issuer: /\.html?$/i
        },


        {
            test: /\.css$/i,
            loader: ['style-loader', 'css-loader'],
            issuer: /\.[tj]s$/i
        },


        { test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader", options: { name: './images/[name].[hash].[ext]', } },
        { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader', options: { name: './fonts/[name].[hash].[ext]' } }

        //{ test: /\.ts$/i, loaders: "ts-loader" },
    ]
  },

  plugins: [
      new AureliaPlugin()
  ]
};

[gregoryagu]

Yes, have set my config to what it says there.

[jods4]

Your config looks rather good. Can you try to break on all exceptions in the debugger and catch whatever fails?
Without more details it's hard to guess what is wrong.

[gregoryagu]

Well, I debugged and stepped through, but no errors are thrown. For now, lets close. I can give you a copy of the project, but it's aspnetcore/vs17. But it's not a big concern. I can use 'import...' for now and circle back later.

[jods4]

Are you sure you enabled "break on all exceptions" in your debugger?
I highly doubt everything goes without a hinch and produces no result at all.

I would have a look at it but I'd like a minimal repro or at least something I can easily start with webpack-dev-server.

One thought occuring to me: do you have @import in your CSS?

If there are no exceptions, it's worth having a look at the network tab. There can sometimes be unexpected requests that 404 due to bundling issue or whatever.

[gregoryagu]

I resolved this. The issue is that I was using a self-closing tag.

Does not work
<require from="css/findme.css"/>

Works
<require from="css/findme.css"><require/>

[jods4]

Yeah you wrote it this way in your issue but I didn't pay attention close enough.
HTML is not XML and you can't self close tags, minus the exceptions documented in the HTML standard. That's why you have <script></script> as well.

[gregoryagu]

Thanks Jods.