Currently, I am working on a meteor js 1.8 app. I have created a layout and now I want to add CSS to it. Here is the structure I am following:
imports
-ui
--stylesheets
--bootstrap.min.css
--font-awesome.min.css
--skins.css
--forms.css
All my CSS files are placed in the 'stylesheets' folder under imports. I have a layout named 'main_layout.html', along with 'main_layout.js' and 'main_layout.css' files which I have organized as:
-ui
--layouts
---dashboard
---main_layout.html
---main_layout.js
---main_layout.css
In the 'main_layout.css' file, I have imported all the styles like this:
@import '{}/imports/ui/stylesheets/bootstrap.min.css';
@import '{}/imports/ui/stylesheets/font-awesome.min.css';
@import '{}/imports/ui/stylesheets/skins.css';
@import '{}/imports/ui/stylesheets/forms.css';
Furthermore, I have imported 'main_layout.css' in 'main_layout.js' :
import './main_layout.html'
import './main_layout.css'
I am using a rule for flow-router to render this layout:
import '../../ui/layouts/dashboard/main_layout'
FlowRouter.route('/', {
name: 'App.home',
action() {
BlazeLayout.render('mainLayout', {main: ''});
},
});
However, when I visit localhost:3000/, I encounter an error in the browser console:
The stylesheet http://localhost:3000/%7B%7D/imports/ui/stylesheets/bootstrap.min.css was not loaded because its MIME type, “text/html”, is not “text/css”.
Similar issues occur for the rest of the CSS files. How can I resolve this problem and load CSS using imports correctly?