Aurelia-cli build issue

Help Requests
1

  1. Using Windows 10, I create a new folder and open Powershell.

  2. ‘au new --here’ with options:
    3. Webpack
    2. ASP.NET Core
    2. Typescript
    1. Default - No markeup processing
    1. Default - Use standard css
    1. None - Skip testing
    2. No - Skip testing
    1. Visual Studio Code
    1. Yes (Default) - Creates the project structure…
    1. Yes (Default) - Installs all server, client and tooling dependencies…

  3. Open ‘project.csproj’ in Visual Studio 2017 and press CTRL-F5 to run in Chrome. Get console error:
    GET http://localhost:59122/dist/vendor.css net::ERR_ABORTED
    The _Layout.cshtml that is generated contains:
    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />

  4. Created file ./src/app.css with ‘background-color:red;’ to test.

  5. Added ‘import ‘./app.css’;’ to top of app.ts.

  6. Changed ASPNETCORE_ENVIRONMENT to Production.

  7. ‘au build --env prod’ gives: Error: Path variable [contenthash] not implemented in this context: [contenthash].css. This seems related to an issue here.

Questions (if anyone can help):
How do I include CSS in my template when generated css has a hash in the filename?
Why is their a 404 vendor.css out of the box?

The js files use attributes asp-src-include="~/dist/app.*.bundle.js" and asp-append-version="true" that seem to work with script tags but css does not seem to work.

2

Maybe you don’t generate hash and use asp.net capability to add hash?
You need cache busting… right?
There is a feature in asp.net core… to generate hash for your scripts/css

damn… can’t find it…
there is an old article about tag helpers…
I’m pretty sure it should still be a part of framework… It is bundling/minification story after all

3

Have you tried it in Development? and running it using dotnet run?

4

The 404 is because the webpack process doesn’t find any css in the imported modules, this is where something like bootstrap might end up. It doesn’t generate an empty file though so you end up with a 404.

5

I created an app.css file and imported that into app.ts, also OnsenUI imported modules do not generate any vendor.css so still 404. In production a css is generated with the filename [contenthash].css (which currently causes error detailed above).

6

̶C̶u̶r̶r̶e̶n̶t̶l̶y̶ ̶I̶ ̶a̶m̶ ̶u̶s̶i̶n̶g̶ ̶b̶u̶n̶d̶l̶e̶s̶c̶o̶n̶f̶i̶g̶.̶j̶s̶o̶n̶ ̶t̶o̶ ̶d̶o̶ ̶t̶h̶i̶s̶:̶
̶ ̶ ̶ ̶ ̶{̶
̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶"̶o̶u̶t̶p̶u̶t̶F̶i̶l̶e̶N̶a̶m̶e̶"̶:̶ ̶"̶w̶w̶w̶r̶o̶o̶t̶/̶c̶s̶s̶/̶a̶p̶p̶.̶m̶i̶n̶.̶c̶s̶s̶"̶,̶
̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶/̶/̶ ̶A̶n̶ ̶a̶r̶r̶a̶y̶ ̶o̶f̶ ̶r̶e̶l̶a̶t̶i̶v̶e̶ ̶i̶n̶p̶u̶t̶ ̶f̶i̶l̶e̶ ̶p̶a̶t̶h̶s̶.̶ ̶G̶l̶o̶b̶b̶i̶n̶g̶ ̶p̶a̶t̶t̶e̶r̶n̶s̶ ̶s̶u̶p̶p̶o̶r̶t̶e̶d̶
̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶"̶i̶n̶p̶u̶t̶F̶i̶l̶e̶s̶"̶:̶ ̶[̶
̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶"̶w̶w̶w̶r̶o̶o̶t̶/̶d̶i̶s̶t̶/̶*̶.̶c̶s̶s̶"̶
̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶]̶
̶ ̶ ̶ ̶ ̶ ̶ ̶}̶,̶
̶
̶I̶ ̶t̶h̶e̶n̶ ̶i̶n̶c̶l̶u̶d̶e̶ ̶t̶h̶e̶ ̶a̶p̶p̶.̶c̶s̶s̶ ̶i̶n̶ ̶t̶h̶e̶ ̶t̶e̶m̶p̶l̶a̶t̶e̶.̶ ̶
̶I̶ ̶w̶a̶s̶ ̶c̶o̶n̶f̶u̶s̶e̶d̶ ̶a̶s̶ ̶t̶o̶ ̶w̶h̶y̶ ̶t̶h̶e̶r̶e̶ ̶i̶s̶ ̶a̶ ̶"̶~̶/̶d̶i̶s̶t̶/̶v̶e̶n̶d̶o̶r̶.̶c̶s̶s̶"̶ ̶a̶s̶ ̶d̶e̶f̶a̶u̶l̶t̶ ̶w̶h̶e̶n̶ ̶I̶ ̶c̶a̶n̶’̶t̶ ̶s̶e̶e̶m̶ ̶t̶o̶ ̶u̶n̶d̶e̶r̶s̶t̶a̶n̶d̶ ̶w̶h̶e̶r̶e̶ ̶o̶r̶ ̶h̶o̶w̶ ̶t̶h̶a̶t̶ ̶i̶s̶ ̶g̶e̶n̶e̶r̶a̶t̶e̶d̶.̶

7

Ok, so now I do not use bundleconfig.json at all.
In webpack.config I changed the ExtractTextPlugin filename to be simply:

...when(extractCss, new ExtractTextPlugin({
      filename: 'app.bundle.css',
      allChunks: true
    })),

and changed the cssRules to minimize:

const cssRules = [
  { loader: 'css-loader', options: { minimize: true } }, //only generated in production so minimize
];

Now I get an easily referenced css filename that contains all styles.
I am still unsure as to if this is correct, but it works. I am still unsure as to the original ‘vendor.css’ 404 issue. I was assuming that using the cli to generate a project would provide a starting point based on the options selected (IDE).

8

original 404 is related to webpack being broken

9

Can you tell me which version of webpack works and generates a vendor.css, therefore no 404? Thanks.

10

^3.x.x I suppose…
or <4.2 maybe