# Where to add CSS in Aurelia 2

**URL:** <https://discourse.aurelia.io/t/where-to-add-css-in-aurelia-2/4112>\
**Category:** Help Requests\
**Created:** [March 15, 2021, 8:43am UTC](https://discourse.aurelia.io/t/where-to-add-css-in-aurelia-2/4112 "2021-03-15T08:43:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [March 15, 2021, 8:43am UTC](https://discourse.aurelia.io/t/where-to-add-css-in-aurelia-2/4112/1 "2021-03-15T08:43:30Z")

</div>

Where is the best place to insert third party CSS (bootstrap, etc …)?

In `main.js` using `import "bootstrap/dist/css/bootstrap.min.css";` or in `app.html` using `<import from="bootstrap/dist/css/bootstrap.min.css"></import>`?

I one of the main differences is the order in which the css gets attached to the head tag of the main html file.

Also, I noticed that in the skeleton that `npx makes aurelia` produces the css files are automatically picked up and inserted into the build. E.g. There is a file called `my-app.css` and this is automatically injected into the head tag of the main html file.

Pretty cool. Is this webpack or aurelia 2?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 15, 2021, 11:28am UTC](https://discourse.aurelia.io/t/where-to-add-css-in-aurelia-2/4112/2 "2021-03-15T11:28:13Z")

</div>

That’s Aurelia 2 conventions. The my-app.css is picked up by my-app.html, you don’t have to explicitly write `<import from="./my-app.css"></import>` (although that also works).

If you don’t use shadow dom, css import in either js or html are doing the same thing.

If you use shadow dom, do css import in html module.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [March 15, 2021, 11:51am UTC](https://discourse.aurelia.io/t/where-to-add-css-in-aurelia-2/4112/3 "2021-03-15T11:51:16Z")

</div>

Awesome, thanks. I noticed one small different from where you import the third party css.

Say these are the two css files that are used: 1) my-app.css and 2) bootstrap.css

If `bootstrap.css` is imported in `main.js`it is imported before `my-app.css`, hence it’s the first style tag in the head tag of the main html file.

if `bootstrap.css` is imported in `app.html` then it’s imported after `my-app.css`. So it’s the second style tag in the head tag of the main html file.

This is probably not a big deal in most cases, but good to know nonetheless.

---

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [March 16, 2021, 8:53am UTC](https://discourse.aurelia.io/t/where-to-add-css-in-aurelia-2/4112/4 "2021-03-16T08:53:50Z")

</div>

> [@huochunpeng](#):
>
> That’s Aurelia 2 conventions. The my-app.css is picked up by my-app.html, you don’t have to explicitly write `<import from="./my-app.css"></import>` (although that also works).

Nice. 🙂

Does it also work with SCSS or other CSS preprocessors? Or can Aurelia or Webpack be configured to handle such preprocessor files instead of regular CSS files in this fashion?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 16, 2021, 9:54am UTC](https://discourse.aurelia.io/t/where-to-add-css-in-aurelia-2/4112/5 "2021-03-16T09:54:44Z")

</div>

Yes. My-app.scss or .less works too.

The default supported are `['.css', '.scss', '.sass', '.less', '.styl']`, and our `@aurelia/webpack-loader` and `@aurelia/plugin-gulp` also allows additional option to add unknown css file extensions (not well documented yet).

> <https://github.com/aurelia/aurelia/blob/0a2d77e206923bcabe43486a3d847f51569b9663/packages-cjs/plugin-conventions/src/options.ts#L49>

**Some dessert** 😉

In this same file, you may notice the template file (defaultTemplateExtensions) doesn’t have to be `my-app.html`. You can have `my-app.md` or `my-app.haml` as long as you config webpack to process them. **You can even mix all of those file extensions in one project**. Have a look of the webpack config in this demo. [GitHub - 3cp/au2-webpack-md-demo: markdown-loader before au2 conventions](https://github.com/3cp/au2-webpack-md-demo/)

Our approach is different from other all-in-one solutions, such as Vue’s Single File Component support which handles all scss/less/postcss/ts/babel in Vue’s SFC component compiler.

In contrast, we make tools to take much less responsibility, but cooperate with existing tools. Users are free to setup their own css pipeline, such as preprocess and postcss.