How to import a css file into a page


#1

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
#2

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;
}


#3

Thanks, will try this.


#4

@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?


#5

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

Thanks


#6

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


#7

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

#8

This method worked correctly


closed #9