# Need Help Understanding Aurelia with Webpack and CSS

**URL:** <https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338>\
**Category:** Help Requests\
**Created:** [March 4, 2019, 5:32pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338 "2019-03-04T17:32:33Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [March 4, 2019, 5:32pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/1 "2019-03-04T17:32:33Z")

</div>

I’m trying to understand how Aurelia CLI configures webpack in regards to CSS.

I created a project using Babel, Webpack and SASS with maximum minification.

In my main.js file, I do the following

```
import './styles/app.scss'
import 'toastr/build/toaster.min.css'

```

In this case, I wind up with all my application css (from my sass files) being compiled into my .js files and the css for toastr being compiled into a [some hash name].css file.

The problem I run into is that my .css isn’t loaded until my .js is loaded which means I can’t rely on any .css for my default “Loading” screen. No biggie, but I’m curious how others handle this? Is there a way to get the toastr.css to bundle in with the rest of my compiles css? Is there a reason .scss gets compiled into the .js files rather than into separate .css files?

Thanks for your help.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 5, 2019, 10:53am UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/2 "2019-03-05T10:53:59Z")

</div>

Generally, I’d recommend:

1. Keep all your static assets in static folder at project root level
2. Use `webpack-copy-plugin`, and configure it to copy static assets with preserved paths, so you can avoid mis-referencing issue.
3. Use [https://github.com/webpack-contrib/mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract all CSS/SCSS in your app into static css so it can be loaded before your JS.

The reason for this browser can handle the loading of CSS better, as it has years of development put into it to optimize this process, compared to injecting style from JS

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [March 5, 2019, 12:43pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/3 "2019-03-05T12:43:25Z")

</div>

I’m a bit confused because it would appear that the `webpack.config.js` file created by the CLI is already using mini-css-extract-plugin. My problem is, I’m not super familiar with webpack to begin with so looking at the `webpack.config.js` is a bit overwhelming at this point – there’s a lot there and I’m having difficulty finding where it is being configured to compile sass into js rather than css.

Incidentally, it does not appear that you can put .scss files in static as they simply get copied into `dist` rather than compiled into .css.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 5, 2019, 1:00pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/4 "2019-03-05T13:00:26Z")

</div>

is there a sass loader in your config? If you select the default one, i guess you already have everything configured. It’s midnight here so I’ll get back after few hours 😃

---

<div class="post-metadata">

**Author:** ![rowellx68](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rowellx68/32/1375_2.png) [@rowellx68](https://discourse.aurelia.io/u/rowellx68)\
**Post date:** [March 5, 2019, 1:09pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/5 "2019-03-05T13:09:41Z")

</div>

If you build your app with the following command, `au build --env prod`, it should extract the CSS files from your JS.

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [March 5, 2019, 1:13pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/6 "2019-03-05T13:13:42Z")

</div>

I am indeed using `au build --env prod` however all the `.scss` files get compiled directly into the `.js` files output by webpack. I’m curious if the default webpack config created by the Aurelia CLI for `.less` acts any differently.

Incidentally, I’ve not made any changes to the `webpack.config.js` file that Aurelia CLI created for me – this seems to be the default behavior when using the SASS option.

---

<div class="post-metadata">

**Author:** ![rowellx68](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rowellx68/32/1375_2.png) [@rowellx68](https://discourse.aurelia.io/u/rowellx68)\
**Post date:** [March 5, 2019, 1:20pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/7 "2019-03-05T13:20:48Z")

</div>

What version CLI have you got? Version `1.0.0-beta.13` seems to extract the CSS just fine.

Cloud you also check what’s in your `aurelia_project/aurelia.json`, under the `build` property?

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [March 5, 2019, 2:58pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/8 "2019-03-05T14:58:09Z")

</div>

I’m on version `1.0.0-beta.13`.

```
"build": {
"options": {
  "server": "dev",
  "extractCss": "prod",
  "coverage": false
    }
  }

```

Like I said, I’m not super familiar with webpack and the whole build process. I have the following import at the beginning of my `main.js` - `import './styles/app.scss'` Notice that my styles (.scss files) are in a folder within my `src` directory – `./src/styles`. Maybe that’s not where they’re supposed to be?

---

<div class="post-metadata">

**Author:** ![rowellx68](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rowellx68/32/1375_2.png) [@rowellx68](https://discourse.aurelia.io/u/rowellx68)\
**Post date:** [March 5, 2019, 3:34pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/9 "2019-03-05T15:34:32Z")

</div>

I’d say you might have found a bug. I generated a new project using the options you did and I can confirm that it is not extracting the CSS. However, the issue does not exist when you set it to use TypeScript.

I’ve had a look at the `webpack.config.js` files that was generated and the only obvious difference is this additional snippet on the Babel version.

```
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    issuer: /\.js$/i
},
{
    test: /\.scss$/,
    use: ['css-loader', 'sass-loader'],
    issuer: /\.html?$/i
}
```

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [March 5, 2019, 4:06pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/10 "2019-03-05T16:06:00Z")

</div>

What do you suggest from here? Do I need to submit this as a bug?

Also, just curious. Your snippet doesn’t totally match mine and I’m wondering if that was a typo on your part or if there is something else at play as well. The `.scss` rules in mine look like this.

```
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    issuer: /\.[tj]s$/i
  },
  {
    test: /\.scss$/,
    use: ['css-loader', 'sass-loader'],
    issuer: /\.html?$/i
  }

```

(Notice the `issuer:` of my first rule.)

---

<div class="post-metadata">

**Author:** ![rowellx68](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rowellx68/32/1375_2.png) [@rowellx68](https://discourse.aurelia.io/u/rowellx68)\
**Post date:** [March 5, 2019, 4:30pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/11 "2019-03-05T16:30:35Z")

</div>

Whoops, my bad. I removed the `[tj]` and replaced with `j`.

It seems that I might have some solution for now, I’m not entirely sure if this is the correct solution thought or if there’s a better one.

```
{
  test: /\.scss$/,
  use: [extractCss ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'],
  issuer: /\.[tj]s$/i
},
{
  test: /\.scss$/,
  use: ['css-loader', 'sass-loader'],
  issuer: /\.html?$/i
}

```

Try replacing your webpack config with the snippet above.

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [March 5, 2019, 4:54pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/12 "2019-03-05T16:54:55Z")

</div>

That does seem to put my compiled `.scss` into a `.css` in my `dist` folder.

A couple further questions.

1. The resulting `.css` is not minified – any ideas how to accomplish that as well?
2. If I also have a vendor import in `main.js` like this `import 'toastr/build/toastr.min.css'` is there a way to get that included in the same `.css` file as my `.scss` files?
3. Lastly, the `.css` file gets created with a random name i.e. `73c329e9186d7eeb5e5e.css`. How do I `<link>` to that in my `_Layout.cshtml` or `index.html` file since I don’t know in advance what name will be generated?

---

<div class="post-metadata">

**Author:** ![rowellx68](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rowellx68/32/1375_2.png) [@rowellx68](https://discourse.aurelia.io/u/rowellx68)\
**Post date:** [March 5, 2019, 6:35pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/13 "2019-03-05T18:35:07Z")

</div>

As for minifying your CSS, it might be useful to look at the setup highlighted [here](https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production).

Your vendor CSS **should** be included in the extracted file. Might be worth checking if the classes are there.

The `index.html` in this case is generated as part of the build process and it will automatically create those `link` and `script` tags. As for Razor views, in dotnet core, you should be able to use the tag helpers.

It would probably look something like [this](https://gist.github.com/rowellx68/5ff5ddae75d1529b2f34bfc2dca13588).

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [March 5, 2019, 6:55pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/14 "2019-03-05T18:55:44Z")

</div>

Thanks so much for your help!

I think the dotnet core thing is going to be an issue. The example you pointed to works great for `.js` files in a `<script>` tag, but for whatever reason, it doesn’t appear that wildcard characters are supported in `<link>` tags – at least when I try it, the console error gives me a 404 trying to load `*.css` – almost like its looking for a file named `*.css` instead of treating `*` as a wildcard character.

Anyhow, thanks again for all your help.

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [March 6, 2019, 3:33pm UTC](https://discourse.aurelia.io/t/need-help-understanding-aurelia-with-webpack-and-css/2338/15 "2019-03-06T15:33:15Z")

</div>

In [ASP.NET](http://ASP.NET) Core, You should be able to use:  
`<link rel="stylesheet" asp-href-include="*.css">`

see: [https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.taghelpers.linktaghelper?view=aspnetcore-2.2](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.taghelpers.linktaghelper?view=aspnetcore-2.2)