Path-Relative Style Sheet Import Vulnerabilities

Is a relative path in a CSS file relative to the CSS file?

Yes, it's relative to the .css

Here's an example layout:

Page:  page.htm ... does not matter where
CSS:   /resources/css/styles.css  
Image: /resources/images/image.jpg

CSS in styles.css:

div { background-image: url('../images/image.jpg');

Create-React-App v2 with Node-SASS and CSS Modules works locally but crashes in Heroku

Okay... this project needs a lot of stylesheet reworking.

All of your component level .scss files should be within the same folder as the component that requires it. Any partial files should be imported within the component-level scss that needs them. Some of your stylesheets are doing it, but some aren't. Also, for whatever reason, you're importing partials within a css stylesheet and importing partials within scss stylesheets. Just stick to scss stylesheets!

To summarize:

• Any stylesheet that needs to be used by a component should be within the
  same folder as the component.
• Any stylesheet that needs to be used by many components, should be a partial file that is imported into a component-level stylesheet.

Right now you have partials, like _app_portfolio.scss files under Sass and component level Portfolio.module.scss stylesheets which are separately being required for Portfolio.js. This is an antipattern. Partials should be reusebale stylesheets that will imported into multiple component level stylesheets for re-usage.

For example, you should structure your app like so: (for simplicity, your main directory folders should be lowercase):

├── src
|   ├── components
|   |   └── Portfolio
|   |       ├── Portfolio.js
|   |       └── Portfolio.scss  (non-partial file, this component-level stylesheet contains all of styles required for Portfolio.js)
|   |   
|   ├── images
|   ├── styles
|   |   ├── base
|   |   |   └── _base.scss (partial file, include any DOM-level styles like "a" or "p", or "div", "body", "html" ... etc.)
|   |   |
|   |   ├── exts
|   |   |   └── _extensions.scss (partial file, include any extended styles like ".clear fix", which is a classname that'll contain repetitive style patterns)
|   |   |
|   |   ├── globals
|   |   |   └── globals.scss (non-partial file, include any GLOBAL stylesheets, like "normalize.css", this stylesheet will be directly imported into ./src/index.js like so: import "./styles/globals/globals.scss";)
|   |   |
|   |   ├── mixins
|   |   |   └── _mixins.scss (partial file, define your mixins that'll be shared with component-level scss)
|   |   |
|   |   ├── vars
|   |   |   └── _vars.scss (partial file, define your variables that'll be shared with component-level scss)
|   |   |
|   |   └── index.scss (OPTIONAL non-partial file that imports all of the partial files above, then this file can be imported into a component-level stylesheet. Instead of writing 4 imports for base, exts, mixins and vars, you'll just do: @import '../path/to/styles/index.scss'; now you have included all 4 partials within 1 import)
|   |
|   └── index.js

---

How to implement the above...

components/Portfolio/Portfolio.js

import React from "react";
import Profile from "../Profile/Profile";
import { portfolioContainer } from "./Portfolio.scss"; // import the className, if there are many classes, then just import them as "styles" from './stylesheet.scss'; then use: "styles.portfolioContainer", "styles.example", "styles.example2" ...etc

const Portfolio = () => {
  return (
    <div className={portfolioContainer}>
      <Profile />
    </div>
  );
};

export default Portfolio;

components/Portfolio/Portfolio.scss

@import '../../styles/vars/vars.scss'; // partial file import, now we can use $variables
@import '../../styles/mixins/mixins.scss'; // partial file import, now we can use @include mixinname();
@import '../../styles/exts/extensions.scss'; // partial file import, now we can use @extend .classname;

.portfolioContainer {
  @include grid-template-columns(1);
  color: $brightgreen;
  background: url('../../images/example.png'); // include your image imports within the component-level stylesheet -- if you import it in a partial file, then import that partial within a stylesheet, then you'll run into some pathing issues. The path defined will be relative to the partial and won't be an absolute path to the image when imported within the component-level stylesheet.
  display: flex;
  flex-flow: column wrap;
  height: 100vh;

  &::after {
    @extend .clear-fix;
  }
}

Take a look at this Sass Basics Guide.

If you're having a hard time understanding, please see my react-starter-kit, which includes notes within styles/index.scss and styles/globals/globals.scss and how to utilize partials in components/Home/Home.scss and be imported into components/Home/Home.js and how to utilize globals in src/index.js.

Since you're using the create-react-app, you may need a sass-compiler to compile the .scss files to one or many .css files. Unfortunately, I don't use the CRA, so you'll have to dive into the docs to find out how.

Importing css file in jsx using relative path

import '../../custom_styles/sidebar.css'; in your mypage.js file.

../ means that you're going one level up from your current file. In your case you have to move two ups.

---

Related Topics