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.
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;
}
@fingerpich hit on a good solution for making your paths simpler. You can set up an alias to your stylesheets directory, and then always import relative to that directory:
Webpack config:
{
resolve: {
alias: {
// the path needs to resolve relative to the files where you're importing them
stylesheets: path.resolve(__dirname, '../stylesheets')
}
}
}
Docs: https://webpack.github.io/docs/configuration.html#resolve-alias
Component file:
import 'stylesheets/main.scss'
Also you can let webpack resolve imports from inside your sass files by adding ~ to the front of the path. Then you can write your imports there just like in your component files and they'll resolve to your alias:
@import '~stylesheets/modules/_colors.scss'
In the overall code which you have provided only one thing is missing semi-colon(;) While using SCSS we have to use semi-colon to terminate the statement.
Here is the updated code :
@import 'modules/all';
@import 'partials/all';
html { font-family: 'Roboto', sans-serif; }
body {
margin: 0;
background-color: orange;
}