Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SASS_PATH=node_modules:src doesn't work #6322

Closed
frederikhors opened this issue Jan 31, 2019 · 9 comments
Closed

SASS_PATH=node_modules:src doesn't work #6322

frederikhors opened this issue Jan 31, 2019 · 9 comments

Comments

@frederikhors
Copy link

I'm trying to use as stated in https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

  • file .env:
...
SASS_PATH=node_modules:src
...
  • file src/styles/index.scss:
@import "bootstrap/scss/bootstrap";

It gives me this error:

Failed to compile.

./src/styles/index.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/index.scss)
@import "bootstrap/scss/bootstrap";
^
      File to import not found or unreadable: bootstrap/scss/bootstrap.

If I use below (with ~) it works:

  • file src/styles/index.scss:
@import "~bootstrap/scss/bootstrap";
  • package.json:
  "dependencies": {
    "@types/jest": "23.3.13",
    "@types/node": "10.12.20",
    "@types/react": "16.7.22",
    "@types/react-router": "4.4.3",
    "@types/react-router-dom": "4.3.1",
    "@types/react-dom": "16.0.11",
    "bootstrap": "4.2.1",
    "node-sass": "4.11.0",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.1.3",
    "typescript": "3.2.4"
  },
  "devDependencies": {
    "source-map-explorer": "1.6.0"
  },
@mrmckeb
Copy link
Contributor

mrmckeb commented Feb 1, 2019

Hi @frederikhors, it looks like you haven't completed the issue template, which makes this very hard to resolve. If you can please supply the requested information, we can take a look at this for you.

@a2k42
Copy link

a2k42 commented Feb 6, 2019

From the documentation for material-components it looks like the .env entry needs to be:

SASS_PATH=./node_modules

If this works for you then it's probably just a correction to the documentation that's needed.

I had the same problem and it's fixed for me now.

@a2k42
Copy link

a2k42 commented Feb 21, 2019

One quick follow on thought I had about this was that I'm not sure if my solution is cross platform.

Was this the intent behind the original method?

SASS_PATH=node_modules:src

As it happens, I am on Windows but use the linux syntax with Git Bash set as my IDE shell. hth

@vimalraj9423
Copy link

I HAVE SAME PROBLEM. ANY SUGGESTION PLEASE...

@sandhilt
Copy link

SASS_PATH=node_modules works for me.

@frederikhors
Copy link
Author

On Windows you have to use ./node_modules.

@iansu
Copy link
Contributor

iansu commented Mar 14, 2019

We should probably mention that in the docs. Would you like to submit a PR?

@iansu iansu self-assigned this Mar 14, 2019
@SamMade
Copy link

SamMade commented Mar 21, 2019

also @iansu can you include in the documentation that you need a semicolon instead of a colon on windows environments

SASS_PATH=./node_modules;./src

https://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/#where-sass-is-headed

monish001 added a commit to monish001/create-react-app that referenced this issue Mar 24, 2019
Mentioned a note for windows operating system to use syntax like `SASS_PATH=./node_modules;./src`
@monish001
Copy link
Contributor

Just created a PR with the fix in the documentation. Please review.

@lock lock bot locked and limited conversation to collaborators Mar 29, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.