Where to add CSS in Aurelia 2

Help Requests
1

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?

1 Like
2

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.

2 Likes
3

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.jsit 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.

4

Nice. :slight_smile:

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?

5

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).

Some dessert :wink:

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

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.

5 Likes