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 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
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
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.
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.
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!
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