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 imports from src/ directory don't work. #5887

Closed
iamarkadyt opened this issue Nov 23, 2018 · 3 comments
Closed

Sass imports from src/ directory don't work. #5887

iamarkadyt opened this issue Nov 23, 2018 · 3 comments

Comments

@iamarkadyt
Copy link

iamarkadyt commented Nov 23, 2018

Is this a bug report?

Possibly.

Did you try recovering your dependencies?

Yes, npm v6.4.1

Which terms did you search for in User Guide?

I went through the whole Styles And Assets section in the CRA docs.

Environment

  System:
    OS: Linux 4.18 Ubuntu 18.10 (Cosmic Cuttlefish)
    CPU: x64 Intel(R) Core(TM) i5-3330 CPU @ 3.00GHz
  Binaries:
    Node: 11.2.0 - /usr/bin/node
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

> npx create-react-app my-app && cd my-app
> npm i -S node-sass
> Rename App.css into App.scss, update App.js imports.
> Create _vars.scss in src/ dir. Add a sample variable in there.
> Use that var in App.scss (it works), import _vars.scss as follows:
@import 'vars';
> Create a new component in src/components dir, add an .scss for it.
> Try to import _vars.scss as @import 'vars'; (FAILS with File to import not found or unreadable: vars.)

Expected Behavior

Sass imports from ./src (non-relative paths, like @import 'vars') are expected to work for sass stylesheets located deeper in the file tree.
At least that's what the docs say: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet (scroll to the bottom).

  • In earlier versions of CRA, Sass tutorial was recommending to use node-sass-chokidar with --include-path switch (specified in package.json scripts) to enable imports from src/ directory.
  • Now docs tell to just install node-sass, say nothing about tweaking the build scripts and sass imports from src/ apparently should work automatically (which they don't, or I am missing something).

I will continue investigating this on my own, but right now the documentation is misleading and that should be fixed.

Reproducible Demo

Derived from Steps to Reproduce section:
https://github.com/arkadyt/sass-imports-bug-cra

@iamarkadyt
Copy link
Author

Updated the issue.

@iamarkadyt iamarkadyt changed the title Sass imports from src/ directory don't work Sass imports from src/ directory don't work. Nov 23, 2018
@qnm
Copy link

qnm commented Nov 26, 2018

Worth noting this: #4494 (comment)

@iamarkadyt
Copy link
Author

@qnm, worked like a charm, thanks :)

@lock lock bot locked and limited conversation to collaborators Jan 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants