Meteor + SCSS + React

Hi there,

I’m currently learning about meteor using the tutorials provided on meteor.com. I am using the React tutorial on meteor.com to recreate the Todo application. Since I’m done with the tutorial I kept implementing some extra functionality. For styling I usually use SCSS, but I was not able to find a way to properly use SCSS in my React components.
What is the best way to use modular SCSS in my React components?

Thanks in advance
~ modev

You can use https://atmospherejs.com/fourseven/scss for css transpilation and https://atmospherejs.com/juliancwirko/postcss for further processing.

Also, you should definitely read https://guide.meteor.com/build-tool.html#css till the end of that article for some very valuable information.

4 Likes

Thanks for your reply. I’m currently using the way which is described in this guide. But is it possible to import the style files into my js files? Can’t find anything in the style guide :frowning:

Of course! https://guide.meteor.com/build-tool.html#css-importing

Why don’t you try it! :slight_smile:

I tried. There is no error in the console but the styles aren’t loaded into my application. When inspecting the elements the elements don’t have any of the properties I defined.
I am importing the styles into my component like that

import '../styles/application.scss'

This should work, shouldn’t it?

You have fourseven:scss installed, right?

Yes, I installed it via

> meteor add fourseven:scss
``` like described on the projects readme

Here’s a quick demo for you:

Clone that repo and test it out yourself. You’ll see that when you run the app, the styles are properly applied.

Edit:
I just realized that you might be thinking this is irrelevant to react because it uses blaze, but well, this applies exactly the same to react and other frameworks because ultimately, meteor, as a build system, simply reads that import statement, passes it through the scss parser, and adds it as a style tag into the head.

So perhaps a good way to validate this in your usecase is to go to the “elements” tab of your dev tools and check the style tags. If you still have a problem, let’s carry on the conversation to see what you might be missing.

Thank you for helping me out! I’ve installed fourseven:scss via the command mentioned in my reply above. My directory structure looks like that:

root
| -- client
|     |-- main.js / main.css / main.html 
|
| -- server
|     |-- main.js
|
| -- app
      | -- styles
      |     | -- app.scss
      | -- ui
            | -- App.js <-- Main react component trying to import the style

In my App.js component I want to import my app.scss stylesheet via

import React, { Component } from 'react';

import '../styles/app.scss';

export default class App extends Component {

  render() {
    return(
      <...>
     );
  }
}

When trying to start the development server it throws an error saying

Error: Cannot find module '../styles/app.scss'

But when looking at my project tree the path to the style file should be fine. What could cause this issue?

Thanks in advance
~ modev

Ok, first thing that strikes me as odd is that you are not using the imports folder for your modules. Therefore, since app.scss is already in the client bundle, there’s even no need to import it. In fact, removing the import could be a solution.

Ultimately, though, I suggest moving your code into a folder named importsas explained in the docs http://docs.meteor.com/packages/modules.html#Modular-application-structure

Also, some people seem to have reported problems with importing from relative url’s, so can you also try importing with import '/app/styles/app.scss'.

It finally works! Thank you!
I use the /app/ directory for the frontend application files because I found it to be more intuitive, I didn’t know that this won’t work as I wanted it to. Moving the React components and styles to /imports/ resolved my issue. Relative paths still produce issues, but using the paths relative to the application root works fine.
Importing the styles now works as I wanted, thanks! :slight_smile:

1 Like

Hi, I don’t know if after 2 years this issue is solved. But I haven’t found a solution.
My mistake is as follows:

While processing files with fourseven:scss (for target web.browser):
/client/stylesheets/breadcrumb.scss: Scss compiler error: Error: Undefined variable: "$dip".
on line 13 of {}/client/stylesheets/breadcrumb.scss
>> 			color: $dip;

My directory structure is as follows:

root
| -- client
|       | -- imports
|               | -- _variables.scss <-- example
|       | -- stylesheets
|               | -- style.scss <-- this contains the @imports
|               | -- breadcrumb.scss <-- contains the variable that does not find
| -- server
|       | -- main.js
| -- imports
|       | -- ui
|             | -- App.jsx
| -- public
|       | -- img

It’s to get an idea of how I have my project.

I’ve used fourseven/scss for css transpilation and juliancwirko/postcss for further processing.

I don’t understand if it’s the order of meteor loading, or the import.

I hope you can help me, thank you very much.

I have a working setup with fourseven/scss:

root
/client

  • main.scss : only one line of code:
    @import "./../imports/client/styles/main";

/imports/client/styles

  • _main.scss : imports all the files from the same folder or subfolders IN THE RIGHT ORDER, starting for me with mixins then variables… e.g:
@import "./mixins";
@import "./variables";
@import "./app";
@import "./accounts/accounts";
  • all my other _filename.scss (mixins, variables, subfolders with components…)