CODEWITHSUNDEEP
reactjs
TyForHelpDude
TyForHelpDude

Reputation: 5002

add a symlink to module from project's node_modules

I have a scss folder outside of /src folder in my project structure this is why react angry with bu

Failed to compile.

./src/index.js
Module not found: You attempted to import ../scss/style.scss which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to
it from project's node_modules/.

here is my index.js file:

import '../scss/style.scss'


ReactDOM.render(
<HashRouter>
    <Switch>
        <Route path="/" name="Home Page" component={Full}/>  
    </Switch>
</HashRouter>, 
    document.getElementById('root'));
registerServiceWorker();

and this is the content of style.scss file:

// Override Boostrap variables
@import "bootstrap-variables";

// Import Bootstrap source files
@import "node_modules/bootstrap/scss/bootstrap";

// Override core variables
@import "core-variables";

// Import core styles
@import "core/core";

// Custom styles
@import "custom";

I searched a lot and understood its not allowed to import it outside of /src directory.. how can I "add a symlink" as react suggest me to do or how can I fix it other way?

EDITED: if i move scss into /src folder:

./src/scss/style.scss
Module build failed:
undefined
^
      File to import not found or unreadable: bootstrap.
Parent style sheet: stdin
      in D:\Repositories\facereco\src\scss\style.scss (line 14, column 1)

Upvotes: 8

Views: 48698

Answers (2)

droid001
droid001

Reputation: 173

You can also use the symlink-dir package. If you have for instance a folder called common outside of your project root then you can configure package.json with a postinstall script which creates a symlink:

"scripts": {
  "link-common": "node_modules/.bin/symlink-dir ../common src/common",
  "postinstall": "npm run link-common"
},

Upvotes: 2

aw0lf
aw0lf

Reputation: 41

If you want to do a symlink check the npm documentation. Here is about it https://docs.npmjs.com/cli/link

In short

  • Go to dictionary with your package, in your case your scss file

cd ../scss

npm link

  • Next go to some other location and:

npm link <your_package>

And you've got it!

Upvotes: 4

Related Questions