Menu
Currently I have the following directory structure:
stylesheets
..modules
...._all.scss
...._colors.scss
..partials
...._all.scss
...._Home.scss
..main.scss
And in my _Home.scss I have:
@import '../modules/all';
.headerStyle {
color: pink;
font-size: 15;
font-weight: 500;
}
And in my main.scss I import all the _all.scss in stylesheets folder like:
@import 'modules/all'
@import 'partials/all'
html { font-family: 'Roboto', sans-serif; }
body {
margin: 0;
background-color: orange
}
And lastly in my component, I would import the stylesheet like so:
import '../../stylesheets/main.scss'
...
<div className="headerStyle">Header</div>
Yet, the div is not being styled with .headerStyle in _Home.scss. I checked the directory path to main.scss and it is correct, and I'm not getting any errors.
And the following is actually being applied:
body {
margin: 0;
background-color: orange
}
What could I be doing wrong? And is there a better way to import stylesheets into a component rather than having to define it every time for a component?
Thank you in advance and will upvote/accept answer.
550
It is now possible to import css files directly into your sass file. The following PR in github solves the issue. The syntax is the same as now - @import "your/path/to/the/file" , without an extension after the file name. This will import your file directly.
The SASS @import function helps us to import multiple SASS or CSS stylesheets together such that they can be used together. Importing a SASS file using the @import rule allows access to mixins, variables, and functions to the other file in which the other file is imported.
I tried the following successfully (using plain HTML and the Scout-App to transform SCSS to CSS):
Edit: As mentioned I've never used React but based on this post hugogiraudel.com it should be the same syntax as in my solution (more or less/on first sight ;-) ).
Edit 2: I started using SCSS just a few days ago myself. As far as I can tell your only errors are the few typo's shown in my example. Since 'body' is applied I assume the import statement in your component is correct for React.
If there is a better solution to do imports into components has to be answered by someone else. But it looks like the author of the linked blog post has another approach and there is also a github repository available.
directory structure:
- project_folder
- index.html
- stylesheets
- main.scss
- partials
- _all.scss
- _Home.scss
Index.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- NOTE: 'css_stylesheets' is the folder where the
Scout-App added the transformed CSS files -->
<link rel="stylesheet" href="css_stylesheets/main.css" type="text/css" />
</head>
<body>
<!-- NOTE: I don't know anything about React but
in HTML the attribute is 'class' not 'className'
Edit 3: 'className' is correct, my bad -->
<div class="headerStyle">Header</div>
</body>
</html>
stylesheets/main.scss
@import 'partials/all'; // Your missing here a semicolon (;) I think
html { font-family: 'Roboto', sans-serif; }
body {
margin: 0;
background-color: orange; // here too but wasn't crucial
}
stylesheets/partials/_all.scss
@import '_Home.scss';
stylesheets/partials/_Home.scss
.headerStyle {
color: pink;
font-size: 30px; // I added here pixels because Firefox ignored it otherwise
font-weight: 500;
}
You have configured Webpack to use stylesheets directory so you could use
import 'main.scss'
instead of
import '../../stylesheets/main.scss'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
