Meteor 1.3 - Import CSS files

help
1

Hey guys,
just playing with 1.3 + React - I’ve saved my components and stylesheets in imports/client/ui. Now my CSS files aren’t loaded into the application, because I didn’t import them. I know that the normal way is to save them all in client/stylesheets, but for a better structure, I want to have them in the folder of the specific component. Is there an easy way to import them via command within my component file?

For example something like:

import React from 'react';
import 'mycomp.css';

class MyComp extends React.Component {
/....
}
2

You should be able to do this with .css files. You just need to provide a correct relative path to the .css file. So for example: import '../imports/stylesheets/style.css'. When you do this Meteor will get your styles from that file and attach them to the <head>...</head>. This is how it works for now. Other option is to use some kind of preprocessor (the one you like the most) and create for example main.styl file outside the imports folder and in that file import all other .styl components which could be located in import folder in many places. Unfortunatelly Meteor don’t officially support such thing like CSS Modules right now.

Meteor Guide structure: http://guide.meteor.com/structure.html#example-app-structure
My app structure: https://github.com/juliancwirko/s-chat-app

3 Likes
3

Yes, you are right. I’ve used a wrong path.

4

Now I’m having an issue with fourseven:scss - I want to import a .scss file into my application.

If I import the following .scss file

.test {
    color:red;

    >.test2 {
        color:green;
    }
}

my application crashes with

/Users/d/.meteor/packages/templating/.1.1.8.1ktms9u++os+web.browser+web.cordova/plugin.compileTemplatesBatch.os/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:116
      throw error;
            ^
TypeError: Cannot call method 'substr' of undefined
5

and does it work with something simple? like:

.test {
  color: red;
}

How do you import that file? From where?

6

Hey,
yeah, it works with that simple CSS code. I import it via import “./mycomp.scss”. As soon as I begin to use “SASS” code, the whole app crashes. Normal CSS works without problems.

7

Maybe it has something to do with this:

Sass imports/partials, which are:
files that are prefixed with an underscore _
marked as isImport: true in the package’s package.js file: api.addFiles(‘x.scss’, ‘client’, {isImport: true})
Starting from Meteor 1.3, all files in a directory named imports/
The source files are compiled automatically (eagerly loaded). The imports are not loaded by themselves; you need to import them from one of the source files to use them.

If I understand it right, I have to create a client/imports.scss file and include any .scss file from imports in it. Mhhh…not really a satisfying solution.

8

Oh, and you import it in Javascript file or in other .scss file. For now in Meteor you can’t import .scss files in your javascript files. But if you import it from imports folder in another .scss file outside imports folder it should work.

9

Yeah, I want to import it via Javascript to have a clean structure. It works with doing a @import outside of the imports directory.

Hopefully importing SCSS via JS will be included in some of the following releases.

10

Heads up for anyone with the issue still, I just had this issue and it looks like .scss javascript imports are now supported in the fourseven/meteor-scss package.

1 Like
11

There is no need to provide the reference of stylesheets in the meteor. Just put your CSS file in client/stylesheets folder. Meteor will automatically apply these CSS rules.

And the same goes with JS as well.