Skip to content

Instantly share code, notes, and snippets.

@ahobson
Last active April 8, 2022 15:29
Show Gist options
  • Save ahobson/54a22effca99167f0f219155584de840 to your computer and use it in GitHub Desktop.
Save ahobson/54a22effca99167f0f219155584de840 to your computer and use it in GitHub Desktop.
cra 5.0 + sass + uswds = ???
$ npx create-react-app uswds-sccs-test
$ yarn add sass uswds nprogress
$ mv src/App.css src/App.scss
# edit App.js to change App.css to App.scss
$ yarn build
# everything is ok
$ echo "@import '~nprogress/nprogress';" >> src/App.scss
$ yarn build
# everything is ok
$ echo "@import '~uswds/src/stylesheets/theme/_uswds-theme-general.scss';" >> src/App.scss
$ yarn build
...
Failed to compile.
SassError: Can't find stylesheet to import.
41 │ @import '~uswds/src/stylesheets/theme/_uswds-theme-general.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
src/App.scss 41:9 root stylesheet
@ahobson
Copy link
Author

ahobson commented Apr 8, 2022

Now changing App.scss to be the following doesn't work

@import 'node_modules/uswds/src/stylesheets/theme/_uswds-theme-general.scss';
@import 'node_modules/uswds/src/stylesheets/theme/_uswds-theme-typography.scss';
@import 'node_modules/uswds/src/stylesheets/theme/_uswds-theme-spacing.scss';
@import 'node_modules/uswds/src/stylesheets/theme/_uswds-theme-color.scss';
@import 'node_modules/uswds/src/stylesheets/theme/_uswds-theme-utilities.scss';

@import 'node_modules/uswds/src/stylesheets/packages/_required.scss';

@import 'node_modules/uswds/dist/scss/uswds.scss';
Failed to compile.

Module not found: Error: Can't resolve '../node_modules/uswds/dist/scss/core/fonts/roboto-mono/roboto-mono-v5-latin-300.woff2' in '/Users/ahobson/src/truss/git/uswds-sccs-test/src'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment