What is the correct way to link to a SCSS file within a component's directory?

Question

What is the correct way to link to a SCSS file within a component's directory?

The structure of my directories is as follows:

stylesheets
..modules
...._all.scss
...._colors.scss
..partials
...._all.scss
...._Home.scss
..main.scss

In the _Home.scss file, I have the following:

@import '../modules/all';

.headerStyle {
  color: pink;
  font-size: 15;
  font-weight: 500;
}

In the main.scss file, I import all the _all.scss files in the stylesheets folder like this:

@import 'modules/all'
@import 'partials/all'

html { font-family: 'Roboto', sans-serif; }
body {
  margin: 0;
  background-color: orange
}

When importing the stylesheet in my component, I simply do:

import '../../stylesheets/main.scss'

...

<div className="headerStyle">Header</div>

However, the .headerStyle styling from _Home.scss is not being applied to the <div> in the component. I have verified the directory path to main.scss and there are no errors present.

Currently, only the styles applied in the body block are being displayed:

body {
  margin: 0;
  background-color: orange
}

What could I possibly be doing wrong? Is there a more effective way to import stylesheets into a component without having to redefine it each time for a component?

Thank you in advance for your assistance, and I appreciate any help given.

javascript css reactjs sass webpack

Answer 1

Answer №1

My successful experience involved using plain HTML along with the Scout-App to convert SCSS to CSS:

Just to add, although I am new to React, I found a helpful post on hugogiraudel.com that suggests the syntax is quite similar to what I used.

Having recently started using SCSS myself, I noticed only a few minor typos in your code example. Assuming the 'body' styling is working, it seems the import statement in your React component is correct.

For a different approach to component imports, I suggest referring to the blog post and the corresponding Github repository mentioned by the author.

Here is the directory structure I followed:

- project_folder
    - index.html
    - stylesheets
        - main.scss
        - partials
            - _all.scss
            - _Home.scss

In 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: In HTML, the attribute is 'class' not 'className'
                   Edit 3: 'className' is correct, my mistake -->
        <div class="headerStyle">Header</div>
    </body>
</html>

In stylesheets/main.scss:

@import 'partials/all'; // You seem to be missing a semicolon (;) here

html { font-family: 'Roboto', sans-serif; }
body {
  margin: 0;
  background-color: orange; // It's optional, but I added it
}

In stylesheets/partials/_all.scss:

@import '_Home.scss';

In stylesheets/partials/_Home.scss:

.headerStyle {
  color: pink;
  font-size: 30px; // Added 'px' for Firefox compatibility
  font-weight: 500;
}

Answer 2

My successful experience involved using plain HTML along with the Scout-App to convert SCSS to CSS:

Just to add, although I am new to React, I found a helpful post on hugogiraudel.com that suggests the syntax is quite similar to what I used.

Having recently started using SCSS myself, I noticed only a few minor typos in your code example. Assuming the 'body' styling is working, it seems the import statement in your React component is correct.

For a different approach to component imports, I suggest referring to the blog post and the corresponding Github repository mentioned by the author.

Here is the directory structure I followed:

- project_folder
    - index.html
    - stylesheets
        - main.scss
        - partials
            - _all.scss
            - _Home.scss

In 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: In HTML, the attribute is 'class' not 'className'
                   Edit 3: 'className' is correct, my mistake -->
        <div class="headerStyle">Header</div>
    </body>
</html>

In stylesheets/main.scss:

@import 'partials/all'; // You seem to be missing a semicolon (;) here

html { font-family: 'Roboto', sans-serif; }
body {
  margin: 0;
  background-color: orange; // It's optional, but I added it
}

In stylesheets/partials/_all.scss:

@import '_Home.scss';

In stylesheets/partials/_Home.scss:

.headerStyle {
  color: pink;
  font-size: 30px; // Added 'px' for Firefox compatibility
  font-weight: 500;
}

Answer 3

Answer №2

Your Webpack setup is set to utilize the stylesheets directory, enabling you to simply use

import 'main.scss'

rather than

import '../../stylesheets/main.scss'

Answer 4

Your Webpack setup is set to utilize the stylesheets directory, enabling you to simply use

import 'main.scss'

rather than

import '../../stylesheets/main.scss'

Answer 5

Answer №3

@fingerpich provided a clever solution for simplifying your paths. By setting up an alias to your stylesheets directory, you can always import relative to that directory:

Here is how you can configure Webpack:

{
  resolve: {
    alias: {
      // Make sure the path resolves relative to the files where you're importing them
      stylesheets: path.resolve(__dirname, '../stylesheets')
    }
  }
}

Check out the documentation for more information:

In your component file, you can now simply import like this:

import 'stylesheets/main.scss'

Additionally, you can make webpack resolve imports from inside your sass files by adding ~ to the front of the path. This allows you to write your imports just like in your component files, and they will resolve to your alias:

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

Refer to the documentation for more details: https://github.com/jtangelder/sass-loader#imports

Answer 6

@fingerpich provided a clever solution for simplifying your paths. By setting up an alias to your stylesheets directory, you can always import relative to that directory:

Here is how you can configure Webpack:

{
  resolve: {
    alias: {
      // Make sure the path resolves relative to the files where you're importing them
      stylesheets: path.resolve(__dirname, '../stylesheets')
    }
  }
}

Check out the documentation for more information:

In your component file, you can now simply import like this:

import 'stylesheets/main.scss'

Additionally, you can make webpack resolve imports from inside your sass files by adding ~ to the front of the path. This allows you to write your imports just like in your component files, and they will resolve to your alias:

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

Refer to the documentation for more details: https://github.com/jtangelder/sass-loader#imports

Answer 7

Answer №4

The code you provided is almost complete, with only one missing detail: the semi-colon(;) When using SCSS, it's important to remember to use semi-colons to end each statement.

Here is the revised code:

@import 'modules/all';
@import 'partials/all';

html { font-family: 'Roboto', sans-serif; }
body {
  margin: 0;
  background-color: orange;
}

Answer 8

The code you provided is almost complete, with only one missing detail: the semi-colon(;) When using SCSS, it's important to remember to use semi-colons to end each statement.

Here is the revised code:

@import 'modules/all';
@import 'partials/all';

html { font-family: 'Roboto', sans-serif; }
body {
  margin: 0;
  background-color: orange;
}

What is the correct way to link to a SCSS file within a component's directory?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Struggling to get my chart to render dynamically in vue-chartjs

Unlock the potential of Vue custom props within the asyncData function in your nuxtjs project!

"Troubleshooting: Node.js encountering a path error while loading a JSON file with

Transforming a string to a Date object using JavaScript

It appears that the validation and onChange event handler in Material-UI's TextField are not functioning as anticipated

Chart rendering failure: unable to obtain context from the provided item

Utilize dynamic tags to implement filters

The function $http.get in AngularJS is providing an undefined response

The system is unable to locate the command "nvm"

How can we modify the elements within an Object tag in HTML? If it is achievable, what is the process?

Vue: restrict entry to the view unless props are configured

I'm wondering why my typography components display correctly on my local host, but not on my aws server. Any insights on

Accelerate website loading

Having trouble navigating the dependency graph: Unable to locate module './crypto_auth' in sodium-universal

Filtering JSON data by date range in React JS

Struggling with integrating HTML Canvas within Vue.js

Clearing values in a Redux form

Displaying posts in a WordPress loop with a unique and unconventional CSS design

Effective ways to send children and type to the classnames library while using Next.js

Tips for storing the outcome of a MySQL query in ReactJs?