Add SASS_PATH instructions to Sass stylesheet docs #5917
Conversation
|
Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed. If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
|
🤔 Hmm. Changing a markdown file shouldn't have broken any tests I suppose. |
| @@ -30,6 +30,16 @@ This will allow you to do imports like | |||
| @import '~nprogress/nprogress'; // importing a css file from the nprogress node module | |||
| ``` | |||
|
|
|||
| `node-sass` also supports the `SASS_PATH` variable. | |||
|
|
|||
| To use imports relative to a path you specify, and from `node_modules` without adding the `~` prefix, you can add a `.env` or `.env.development` (and `.env.production`) file at the project root with the variable `SASS_PATH=node_modules:my_directory`. For more directories you can keep adding them to `SASS_PATH` like `path1:path2:path3` and so on. | |||
There was a problem hiding this comment.
Just specify .env and then link to the docs on adding environment variables: https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/adding-custom-environment-variables.md#adding-development-environment-variables-in-env.
Replace my_directory with src as it's probably the most common use case.
Change the last sentence to something like "To specify more directories you can add them to SASS_PATH separated by a : like so: path1:path2:path3.
There was a problem hiding this comment.
Implemented this change.
|
|
||
| To use imports relative to a path you specify, and from `node_modules` without adding the `~` prefix, you can add a `.env` or `.env.development` (and `.env.production`) file at the project root with the variable `SASS_PATH=node_modules:my_directory`. For more directories you can keep adding them to `SASS_PATH` like `path1:path2:path3` and so on. | ||
|
|
||
| Assuming you have `SASS_PATH=node_modules:src`, this will allow you to do imports like the way you’re used to |
There was a problem hiding this comment.
Change this to "If you set SASS_PATH=node_modules:src this will allow you to do imports like"
There was a problem hiding this comment.
Implemented this change.
A bunch of issues popped up with people asking how to have SASS/SCSS imports the way the would expect normally. Turns out `node-sass` supports the SASS_PATH variable that we can use. This PR adds that to the documentation.
jayantbh
force-pushed
the
sass-path-docs
branch
from
5c5ddce
to
ae4a949
Compare
|
Deploy preview for gallant-davinci-8f9bd9 failed. Built with commit ae4a949 https://app.netlify.com/sites/gallant-davinci-8f9bd9/deploys/5c06555de47085121a9f12a3 |
|
Thanks! |
* master: (39 commits) Added extension to .eslintrc (facebook#5988) Update links to docs in all package README files (facebook#5912) Use https for linked images in docs to fix mixed content warnings (facebook#5985) Improve error messaging in verifyPackageTree.js (facebook#5974) Add removeItem to localStorage mock in docs (facebook#5919) Add SASS_PATH instructions to Sass docs (facebook#5917) Suggest a different default for speed reasons (facebook#5959) Add pre-eject message about new features in v2 (facebook#5954) Add netlify.toml to prepare for deploy to netlify facebook#5807 (facebook#5930) Correct some comments (facebook#5927) Add note to docs about using Sass and Flow together (facebook#5823) Update PWA link in README (facebook#5907) Add placeholders to template README for bit.ly links. (facebook#5808) Disable copy to clipboard in cra --info (facebook#5905) Support setupTests.ts (facebook#5698) Remove unnecessary whitespace in template HTML Run prettier on HTML files (facebook#5839) Some Grammar fixes (facebook#5858) Fix link to page about running tests (facebook#5883) fix: make typescriptformatter support 0.5 of fork checker (facebook#5879) ...
A bunch of issues popped up with people asking how to have SASS/SCSS imports the way the would expect normally.
Turns out
node-sasssupports the SASS_PATH variable that we can use. This PR adds that to the documentation.