javascript - How to reference in directory of SCSS file from component?

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 ponent, 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 ponent rather than having to define it every time for a ponent?

Thank you in advance and will upvote/accept answer.

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 ponent, 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 ponent rather than having to define it every time for a ponent?

Thank you in advance and will upvote/accept answer.

Share Improve this question edited Jan 31, 2017 at 23:28 asked Jan 19, 2017 at 0:59 Jo Ko 7,57516 gold badges69 silver badges128 bronze badges

Are you importing _Home.scss into partials/_all.scss? @import 'Home' – inostia Commented Jan 31, 2017 at 23:59
first of all, is it a typo in @import 'modules/all'? shouldn't it be _all? secondly, what is the content of _all.scss files? – Dennis Baizulin Commented Feb 6, 2017 at 11:53

Add a ment |

4 Answers 4

Sorted by: Reset to default 2 +25

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. 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 ponent is correct for React.

If there is a better solution to do imports into ponents 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/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'

@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 ponent files and they'll resolve to your alias:

@import '~stylesheets/modules/_colors.scss'

Docs: https://github./jtangelder/sass-loader#imports

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;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to reference in directory of SCSS file from component? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)