How to import a css file into a page


I’d like to import semantic ui css or any other arbitrary css/less file into a page
I currently have it added to the content/assets/stylesheets folder

Increase UI's font size

You can create index.less and import your custom css as shown below.

In your index.less

@import '[relative_path_to_your_css]'

.your-other-css {
   font-size: 16px;


Thanks, will try this.


@tonycho For some reason my index.less file does not get included, and thus the import doesn’t work either. I have it located at content/assets/stylesheets/index.less .
My theme.css file works and that is in the same folder. Any thoughts?


Can you remove your theme.css file and restart your node server? It might not get recognized if if the file theme.css is already present



What is the process for restarting the node server? @tonycho


The latest c3 ui will compile the less files automatically when you provision. If you’re not on the latest, you can use an atom plugin called less-autocompile and it will compile your less files into theme.css

In your index.less

// out: theme.css, sourcemap: false, compress: false


This method worked correctly

closed #9