How can I resolve "Error: Can't find stylesheet to import." for the uswds source styles (Ver 3.3.0)?

284 Views Asked by At

I'm using Rails 6.1.7 with jsbundling-rails and cssbundling-rails. I'm bundling with Webpack and Dart sass for js and css respectively. I've tried to follow the docs, and added the sass load paths as follows in my webpack.config.js:

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [
        {
          loader: "sass-loader",
          options: {
            sourceMap: true,
            sassOptions: {
              includePaths: [
                "./node_modules/@uswds",
                "./node_modules/@uswds/uswds/packages/uswds"
              ],
            },
          }
        }
      ],
    },
  ],
}

In my application.sass.scss file (sass entry point), I have the following:

// Entry point for your Sass build

// 1. Load USWDS settings
@forward "./uswds/uswds-theme";
// 2. Load USWDS source code
@forward "../../../node_modules/@uswds/uswds/packages/uswds";
// 3. Load your project's custom Sass
@forward "./uswds/uswds-theme-custom-styles";

Finally, my package.json looks like:

"dependencies": {
  "@uswds/uswds": "^3.3.0",
  "css-loader": "^6.7.3",
  "node-sass": "^8.0.0",
  "sass": "^1.58.0",
  "sass-loader": "^13.2.0",
  "webpack": "^5.75.0",
  "webpack-cli": "^5.0.1"
},
"scripts": {
  "build": "webpack --config webpack.config.js",
  "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}

Now when I run ./bin/dev to both watch for changes and spin the server up, I receive the following error:

14:40:43 css.1  | Error: Can't find stylesheet to import.
14:40:43 css.1  |   ╷
14:40:43 css.1  | 5 │ @forward "uswds-global";
14:40:43 css.1  |   │ ^^^^^^^^^^^^^^^^^^^^^^^
14:40:43 css.1  |   ╵
14:40:43 css.1  |   node_modules/@uswds/uswds/packages/uswds/_index.scss 5:1  @forward
14:40:43 css.1  |   node_modules/@uswds/uswds/src/stylesheets/uswds.scss 3:1  @forward
14:40:43 css.1  |   app/assets/uswds/styles.scss 2:1                          @use
14:40:43 css.1  |   app/assets/stylesheets/application.sass.scss 21:1         root stylesheet
14:40:43 css.1  | 
14:40:43 css.1  | Sass is watching for changes. Press Ctrl-C to stop.

I'm confused because I'm able to reach the uswds source styles (node_modules/@uswds/uswds/packages/uswds), but once that file starts looking for the other scss files (uswds-global, uswds-helpers, etc.), I start getting errors. Here's the code the error is referencing, which is inside of node_modules/@uswds/uswds/packages/uswds:

/*! uswds @version */

// Global
// -------------------------------------
@forward "uswds-global";

// Helpers
// -------------------------------------
@forward "uswds-helpers";

// Components
// -------------------------------------
@forward "uswds-typography";
@forward "usa-accordion/src/styles";
@forward "usa-alert/src/styles";
@forward "usa-banner/src/styles";
@forward "usa-breadcrumb/src/styles";
@forward "usa-button-group/src/styles";
@forward "usa-button/src/styles";
@forward "usa-card/src/styles";
@forward "usa-checklist/src/styles";
@forward "usa-collection/src/styles";
@forward "usa-embed-container/src/styles";
@forward "usa-footer/src/styles";
@forward "usa-form/src/styles";
@forward "usa-graphic-list/src/styles";
@forward "usa-header/src/styles";
@forward "usa-hero/src/styles";
@forward "usa-icon-list/src/styles";
@forward "usa-icon/src/styles";
@forward "usa-identifier/src/styles";
@forward "usa-in-page-navigation/src/styles";
@forward "usa-language-selector/src/styles";
@forward "usa-layout-docs/src/styles";
@forward "usa-layout-grid/src/styles";
@forward "usa-media-block/src/styles";
@forward "usa-modal/src/styles";
@forward "usa-nav/src/styles";
@forward "usa-pagination/src/styles";
@forward "usa-process-list/src/styles";
@forward "usa-search/src/styles";
@forward "usa-section/src/styles";
@forward "usa-sidenav/src/styles";
@forward "usa-site-alert/src/styles";
@forward "usa-skipnav/src/styles";
@forward "usa-step-indicator/src/styles";
@forward "usa-summary-box/src/styles";
@forward "usa-table/src/styles";
@forward "usa-tag/src/styles";
@forward "usa-tooltip/src/styles";
@forward "uswds-form-controls";

// Utilities
// -------------------------------------
@forward "uswds-utilities/src/styles";

Does anyone know how I can resolve this issue? I feel like I'm pretty close to compiling the css, but this is the current blocker. Thank you!

0

There are 0 best solutions below